vue3-flip-countdown

> Customize Countdown timer with Flip Animation for Vue 3.x

> vue3-flip-countdown.netlify.app

!Netlify Status

Demo

Table of contents

- Demo
- Installation
- Global Usage
- Single File Component Usage
- Emits
- Props
- References
- Requirements
- License

Installation

``
npm i vue3-flip-countdown --save
`

Global Usage


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

App.vue
`js



`

Single File Component Usage


`vue


``

Emits

| Name | Description |
| --- | --- |
| timeElapsed | event that created when the time came |

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

- vue2-flip-countdown
- vuejs-countdown
- Demo for 'Flip clock & countdown, Vue'

Requirements

- Vue version 3.x.x

License

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