flip countdown timer component using Vue.js

A simple flip countdown timer component for Vue 2.x through which we can create timer for our web pages to show the timer countdown for users generally these are used over ecommerce or hosting website to show the sell discount

Here is the preview of flip countdown time using Vue.js

Installation

npm i vue2-flip-countdown --save

Running Demo on Local Machine

cd demo
npm i
npm run serve

Then open http://localhost:8080 on a browser

Usage

<template>
  <div>
    <flip-countdown deadline="2018-12-25 00:00:00"></flip-countdown>
  </div>
</template>

<script>
  import FlipCountdown from 'vue2-flip-countdown'

  export default {
    components: { FlipCountdown }
  }
</script>

• If you want to remove days section, set showDays prop to false (available since v0.10.0)
• If you want to remove hours/minutes/seconds section, set showHours/showMinutes/showSeconds prop to false (available since v0.11.0)

<flip-countdown deadline="2018-12-25 00:00:00" :showDays="false"></flip-countdown>

• To notify if timer has elapsed, bind a handler to timeElapsed event emitted by component

<flip-countdown deadline="2018-12-25 00:00:00" @timeElapsed="timeElapsedHandler"></flip-countdown>

Please refer to /demo directory for examples.

If you’re using Nuxt.js, use to avoid server-side rendering. (You will get error if you don’t use )

<template>
  <div>
    <no-ssr>
      <flip-countdown deadline="2018-12-25 00:00:00"></flip-countdown>
    </no-ssr>
  </div>
</template>