Countdown component for Vue.js.

• Website

• Main
• Getting started
• Props
• Methods
• Events
• Browser support
• Versioning
• License

dist/
├── vue-countdown.js        (UMD)
├── vue-countdown.min.js    (UMD, compressed)
├── vue-countdown.common.js (CommonJS, default)
└── vue-countdown.esm.js    (ES Module)

npm install @xkeshi/vue-countdown

• Browser: window.VueCountdown
• CommonJS: var VueCountdown = require('@xkeshi/vue-countdown')
• ES2015: import VueCountdown from '@xkeshi/vue-countdown'

Vue.component('countdown', VueCountdown);

<countdown :time="2 * 24 * 60 * 60 * 1000">
  <template scope="props">Time Remaining：{{ props.days }} days, {{ props.hours }} hours, {{ props.minutes }} minutes, {{ props.seconds }} seconds.</template>
</countdown>
<!-- <span>Time Remaining：01 days, 23 hours, 59 minutes, 59 seconds.</span> -->

⬆ back to top

• Type: Boolean
• Default: true

Start to countdown automatically when initialized.

• Type: Boolean
• Default: true

Add a leading zero to the output days, hours, minutes and seconds if they are less than 10.

• Type: Number
• Default: 1000

Update interval time (in milliseconds) of the countdown.

<countdown v-bind:interval="100"></countdown>

• Type: Number
• Default: 0

Total number of time (in milliseconds) for the countdown.

Note: The given value should not less than 0.

• Type: String
• Default: 'span'

The tag of the component root element in the countdown.

Start to countdown.

<countdown v-bind:auto-start="false" ref="countdown"></countdown>

export default {
  mounted() {
    this.$refs.countdown.start();
  },
};

Stop the countdown.

This event fires when countdown started.

This event fires when countdown in progress.

<countdown v-on:countdownprogress="onCountdownProgress"></countdown>

export default {
  methods: {
    onCountdownProgress(data) {
      console.log(data.days);
      console.log(data.hours);
      console.log(data.minutes);
      console.log(data.seconds);
    },
  },
};

This event fires when countdown stopped.

⬆ back to top

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Opera (latest)
• Edge (latest)
• Internet Explorer 9+

Maintained under the Semantic Versioning guidelines.

MIT © Xkeshi

⬆ back to top