Countdown Timer With Flip Animation For Vue 3.x

A customize countdown timer with flip animation for Vue 3.x application.

How to use it:

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 the countdown timer to the template.

<vue3-flip-countdown />

3. Available props to config 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'
}

Preview:

Changelog:

v0.1.4 (12/15/2021)

• timeElapsed emit added

Download Details:

Author: coskuncayemre

Live Demo: https://vue3-flip-countdown.netlify.app/

Download Link: https://github.com/coskuncayemre/vue3-flip-countdown/archive/refs/heads/master.zip

Official Website: https://github.com/coskuncayemre/vue3-flip-countdown

Install & Download:

# NPM
$ npm i vue3-flip-countdown