vue3-flip-countdown

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	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