vue3-flip-countdown

Customize Countdown timer with Flip Animation for Vue 3.x

vue3-flip-countdown.netlify.app

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

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>

Emits

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

Props

| Name | Type | Default | | --- | --- | --- | | deadlineISO | StringYYYY-MM-DDTHH:mm:ss.sssZ | | | deadline | StringYYYY-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