Minimal Countdown Component For Vue.js

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

Preview:

Changelog:

v2.1.2 (08/26/2023)

• reset the end time on start when the autoStart prop is set to false

v2.1.1 (03/19/2023)

• update the total milliseconds correctly

v2.1.0 (08/13/2022)

• Add the restart method.

v2.0.0 (02/07/2022)

• Update for Vue 3

Download Details:

Author: fengyuanchen

Live Demo: minimal-countdown-component

Download Link: https://github.com/fengyuanchen/vue-countdown/archive/master.zip

Official Website: https://github.com/fengyuanchen/vue-countdown

Install & Download:

# Yarn
$ yarn add @chenfengyuan/vue-countdown

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