https://github.com/coskuncay/vue3-flip-countdown
Countdown timer with Flip Animation for Vue 3.x
https://github.com/coskuncay/vue3-flip-countdown
countdown countdown-timer flip-countdown javascript timer vue vue3 vuejs vuejs-components vuejs3
Last synced: 4 months ago
JSON representation
Countdown timer with Flip Animation for Vue 3.x
- Host: GitHub
- URL: https://github.com/coskuncay/vue3-flip-countdown
- Owner: coskuncay
- Created: 2021-11-17T12:36:29.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-11-25T10:29:09.000Z (over 2 years ago)
- Last Synced: 2025-10-12T09:55:20.633Z (8 months ago)
- Topics: countdown, countdown-timer, flip-countdown, javascript, timer, vue, vue3, vuejs, vuejs-components, vuejs3
- Language: Vue
- Homepage: https://vue3-flip-countdown.netlify.app
- Size: 150 KB
- Stars: 112
- Watchers: 2
- Forks: 17
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-vue - vue3-flip-countdown
README
# vue3-flip-countdown
> Customize Countdown timer with Flip Animation for [Vue](https://vuejs.org/ "Vue Homepage") 3.x
> [vue3-flip-countdown.netlify.app](https://vue3-flip-countdown.netlify.app/)
## [Demo](https://vue3-flip-countdown.netlify.app/)
## Table of contents
- [Demo](#demo)
- [Installation](#installation)
- [Global Usage](#global-usage)
- [Single File Component Usage](#single-file-component-usage)
- [Emits](#emits)
- [Props](#props)
- [References](#references)
- [Requirements](#requirements)
- [License](#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
export default {
name: 'App',
components: {
}
}
```
## Single File Component Usage
```vue
import {Countdown} from 'vue3-flip-countdown'
export default {
name: 'App',
components: {
Countdown
}
}
```
## 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](https://github.com/philipjkim/vue2-flip-countdown)
- [vuejs-countdown](https://github.com/getanwar/vuejs-countdown)
- [Demo for 'Flip clock & countdown, Vue'](https://codepen.io/shshaw/pen/BzObXp)
## Requirements
- [Vue](https://vuejs.org/) version **3.x.x**
## License
[MIT](https://choosealicense.com/licenses/mit/) Copyright (c) 2021, [Emre Coşkunçay](https://github.com/coskuncayemre)