Countdown with a Vue.js component

vue-countdown

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.

Example

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"
    >
</vue-countdown>

<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.