Countdown timer with Flip Animation for Vue 3.x

by Vue.js Examples

vue3-flip-countdown

Customize Countdown timer with Flip Animation for Vue 3.x

vue3-flip-countdown.netlify.app

Demo

Installation

npm i vue3-flip-countdown --save

Global Usage

main.js

import { createApp } from 'vue'
import App from './App.vue'
import Countdown from 'vue3-flip-countdown'
createApp(App).use(Countdown).mount('#app')

App.vue

<template>
  <vue3-flip-countdown />
</template>

<script>

export default {
  name: 'App',
  components: {
  }
}
</script>

Single File Component Usage

<template>
  <Countdown />
</template>

<script>
import {Countdown} from 'vue3-flip-countdown'
export default {
  name: 'App',
  components: {
    Countdown
  }
}
</script>

Props

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

References

Requirements

  • Vue version 3.x.x

License

MIT Copyright (c) 2021, Emre Coşkunçay

GitHub

View Github