Flip Countdown Component For Vue.js 2

A simple flip countdown timer component for Vue 2.x.

How to use it:

1. Import the FlipCountdown component.

import FlipCountdown from 'vue2-flip-countdown'

2. Register the component.

export default {
  components: { FlipCountdown }
}

3. Add the component to the app and define the date:

<flip-countdown deadline="2021-12-25 00:00:00"></flip-countdown>

4. Available component props.

deadline: {
  type: String,
},
stop: {
  type: Boolean,
},
showDays: {
  type: Boolean,
  required: false,
  default: true,
},
showHours: {
  type: Boolean,
  required: false,
  default: true,
},
showMinutes: {
  type: Boolean,
  required: false,
  default: true,
},
showSeconds: {
  type: Boolean,
  required: false,
  default: true,
},
labels: {
  type: Object,
  required: false,
  default: function () {
      return {
          days: 'Days',
          hours: 'Hours',
          minutes: 'Minutes',
          seconds: 'Seconds',
      };
  },
},
countdownSize: {
  type: String,
  required: false,
},
labelSize: {
  type: String,
  required: false,
},

Preview:

Changelog:

01/15/2023

• v1.0.0

01/15/2023

• fix: flipBottom animation translateZ for iOS

11/18/2021

• v0.12.1

09/20/2020

• v0.11.1

09/12/2020

• Add showHours, showMinutes and showSeconds to control sections exposure

Download Details:

Author: philipjkim

Live Demo: https://philipjkim.github.io/vue2-flip-countdown/index.html

Download Link: https://github.com/philipjkim/vue2-flip-countdown/archive/master.zip

Official Website: https://github.com/philipjkim/vue2-flip-countdown

Install & Download:

# NPM
$ npm install vue2-flip-countdown --save