Minimal Countdown Component For Vue.js

Install & Download:

# Yarn
$ yarn add @chenfengyuan/vue-countdown
# NPM
$ npm i @chenfengyuan/vue-countdown --save

Description:

A simple plain countdown timer component for Vue.js.

How to use it:

1. Import the countdown component.

import VueCountdown from '@chenfengyuan/vue-countdown';

2. Import the component.

Vue.component(VueCountdown.name, VueCountdown);

3. The HTML.

<countdown :time="time" :interval="100" tag="p">
  <template slot-scope="props">New Year Countdown：{{ props.days }} days, {{ props.hours }} hours, {{ props.minutes }} minutes, {{ props.seconds }}.{{ Math.floor(props.milliseconds / 100) }} seconds.</template>
</countdown>

4. Default props.

/**
 * Starts the countdown automatically when initialized.
 */
autoStart: {
  type: Boolean,
  default: true,
},
/**
 * Emits the countdown events.
 */
emitEvents: {
  type: Boolean,
  default: true,
},
/**
 * The interval time (in milliseconds) of the countdown progress.
 */
interval: {
  type: Number,
  default: 1000,
  validator: (value) => value >= 0,
},
/**
 * Generate the current time of a specific time zone.
 */
now: {
  type: Function,
  default: () => Date.now(),
},
/**
 * The tag name of the component's root element.
 */
tag: {
  type: String,
  default: 'span',
},
/**
 * The time (in milliseconds) to count down from.
 */
time: {
  type: Number,
  default: 0,
  validator: (value) => value >= 0,
},
/**
 * Transforms the output props before render.
 */
transform: {
  type: Function,
  default: (props) => props,
},