Vue countdown is a simple countdown timer component for Vuejs 3.

vue awesome countdown timer animation, vue countdown timer npm, vuetify countdown timer, typescript countdown timer minutes seconds

A Local Individual For Each Countdown Timer Used on JQuery | Timer.js

How to make use of it:

Install and download:

# Yarn
$ yarn add @chenfengyuan/vue-countdown

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

1. Import a countdown component.

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

2. Import the component.

Vue.component(VueCountdown.name, VueCountdown);

3. 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. Virtual 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,
},

Methods

Minimal Countdown Component, vue-countdown Plugin/Github, countdown timer ui design

See Demo And Download

Official Website(fengyuanchen): Click Here

This superior jQuery/javascript plugin is developed by fengyuanchen. For extra Advanced Usage, please go to the official website.