Customize Countdown Timer With Flip Animation for Vue 3.x

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’,}