Countdown with a Vue.js component


Component for Vue.js which creates a countdown timer based on a provided number of seconds or a date in the future.

Take a look at the example below.


To start working the Countdown component use the following command to install it.

$ yarn add npm install @dmaksimovic/vue-countdown

If used as a local component

//In a component
import VueCountdown from '@dmaksimovic/vue-countdown'
export default {
  components: {
    'vue-countdown': VueCountdown
<vue-countdown @time-expire="handleTimeExpire" :seconds="4" :date="date" :message="message" :start="start"

<button @click="startTimer" class="btn-lg btn-danger">Start timer</button>

The following options are used in the component:

  • date: A date in the future used as a string. Any string that can be parsed by Date.parse() is considered valid. Takes precedence over seconds parameter.
  • seconds - number of seconds to start counter from.
  • message - message to display when counter reach to zero.
  • start - boolean value whether to start timer or not.

and the time-expire event, triggered when the timer finishes.

These options need to be in data and events in methods objects.

data () {
return {
    start: false,
    // date: 'Sep 28, 2017', // if you set the date option it will take place over the seconds option
    message: 'Wake up Neo!'


methods: {
handleTimeExpire () {
        console.log('Find Cortana!')
startTimer () {
        this.start = true

That's it! If you are interested in more or you have any bugs and suggestions, click here.