Vue3 Flip countdown is customized to the countdown counter with Flip Animation for Vue 3.x.
Must Read: [Countdown] Simple Round Clock with HTML, CSS, and Javascript
How to make use of it:
Install and download:
# NPM $ npm i vue3-flip-countdown
1. Import and register the component.
import { createApp } from 'vue' import App from './App.vue' import Countdown from 'vue3-flip-countdown' createApp(App).use(Countdown).mount('#app')
2. Add a countdown timer to the template.
<vue3-flip-countdown />
3. Props available to configure the countdown timer.
deadline: { type: String, required: false, default: moment() .add(32, "d") .add(10, "s") .format(fmt), }, deadlineISO: { type: String, required: false, }, deadlineDate: { type: Date, required: false, }, countdownSize:{ type:String, required:false, // default:"2.2rem" }, labelSize:{ type:String, required:false, // default:"2.2rem" }, stop: { type: Boolean, required: false, }, flipAnimation: { type: Boolean, required: false, default: true, }, showDays: { type: Boolean, required: false, default: true, }, showHours: { type: Boolean, required: false, default: true, }, showMinutes: { type: Boolean, required: false, default: true, }, showSeconds: { type: Boolean, required: false, default: true, }, showLabels: { type: Boolean, required: false, default: true, }, labels: { type: Object, required: false, default: function () { return { days: 'Days', hours: 'Hours', minutes: 'Minutes', seconds: 'Seconds', }; }, }, mainColor: { type: String, default: '#EC685C' }, secondFlipColor: { type: String, default: (props) => props.mainColor, }, mainFlipBackgroundColor: { type: String, default: '#222222' }, secondFlipBackgroundColor: { type: String, default: '#393939' }, labelColor: { type: String, default: '#222222' }
Props
Must Read: jQuery Plugin for Countdown Timer on HTML Page | SyoTimer
Name | Type | Default |
---|---|---|
deadlineISO | String YYYY-MM-DDTHH:mm:ss.sssZ | |
deadline | String YYYY-MM-DD HH:mm:ss | 32d,0h,0m,10s |
deadlineDate | Date | |
countdownSize | String | 3rem |
labelSize | String | 1.2rem |
flipAnimation | Boolean | true |
mainColor | String | ‘#EC685C’ |
secondFlipColor | String | props.mainColor |
mainFlipBackgroundColor | String | ‘#222222’ |
secondFlipBackgroundColor | String | ‘#393939’ |
labelColor | String | ‘#222222’ |
showLabels | Boolean | true |
stop | Boolean | |
showDays | Boolean | true |
showHours | Boolean | true |
showMinutes | Boolean | true |
showSeconds | Boolean | true |
labels | Object | {days: ‘Days’, hours: ‘Hours’, minutes: ‘Minutes’, seconds: ‘Seconds’,} |
See Demo And Download

Official Website(coskuncayemre): Click Here
This superior jQuery/javascript plugin is developed by coskuncayemre. For extra Advanced Usage, please go to the official website.