Customize Countdown Timer With Flip Animation for Vue 3.x

Vue3 Flip countdown is customize the countdown counter with Flip Animation for Vue 3.x.

flip countdown timer jquery, flip countdown timer online, flip clock, countdown timer with animation, flipclock countdown to date, css countdown timer animation

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'
}

Countdown Timer With Flip Animation, vue3-flip-countdown Plugin/Github