A simple flip countdown timer component for Vue 2.x
npm i vue2-flip-countdown --save
cd demo
npm i
npm run serve
Then open http://localhost:8080 on a browser.
<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):
<flip-countdown deadline="2018-12-25 00:00:00" :showDays="false"></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>
Author: philipjkim
Live Demo: https://philipjkim.github.io/vue2-flip-countdown/index.html
GitHub: https://github.com/philipjkim/vue2-flip-countdown
#vuejs #javascript #vue #vue-js