Customize Countdown timer with Flip Animation for Vue 3.x
- Demo
- Installation
- Global Usage
- Single File Component Usage
- Emits
- Props
- References
- Requirements
- License
npm i vue3-flip-countdown --save
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><template>
<Countdown />
</template>
<script>
import {Countdown} from 'vue3-flip-countdown'
export default {
name: 'App',
components: {
Countdown
}
}
</script>| Name | Description |
|---|---|
| timeElapsed | event that created when the time came |
| 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',} |
- Vue version 3.x.x
MIT Copyright (c) 2021, Emre Coşkunçay