Flip Countdown Component For Vue.js

A simple flip countdown timer component for Vue 2.x, you can use this countdown component in your vue based app for display deal expiry date, coming soon page etc.
Flip Countdown Component For 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)

```vue
<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 <no-ssr> to avoid server-side rendering. (You will get error if you don’t use <no-ssr>)

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

See live demo and download source code.

Don’t forget to Subscribe My Public Notebook for more useful free scripts, tutorials and articles.

This awesome script developed by philipjkim. Visit their official repository for more information and follow for future updates.


Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.