At the end of this post you’ll learn how to implement a basic vue countdown timer component.

In a web project I built I needed to show the user a countdown timer until the UI/options will expire.

So I ended up building a quite simple Vue Component that can be integrated in any app and that can be easily extended for any needs.

The template of the Vue Countdown Timer Component looks like this.

I’ve also used Bootstrap class to make the timer red when there’s no more time left.

<template>
    <div>
        <p :class="{'text-danger': total<=0}">
            <strong>{{minutes}}</strong>
            <strong>:</strong>
            <strong>{{seconds}}</strong>
        </p>
    </div>
</template>

The controller of the component:

export default {
    props: {
        time: {
            type: Number,
            default: 0
        }
    },
    data: function () {
        return {
            total: '',
            minutes: '--',
            seconds: '--',
            interval: 0
        }
    },
    mounted: function () {
        this.total = parseInt(this.time, 10)
        this.interval = setInterval(() => {
            this.tick()
        }, 1000)
    },
    methods: {
        str_pad_left: function (string, pad, length) {
            return (new Array(length+1).join(pad)+string).slice(-length)
        },
        tick: function () {
            var minutes = Math.floor(this.total / 60)
            var seconds = this.total - minutes * 60
            this.minutes = this.str_pad_left(minutes, '0', 2)
            this.seconds = this.str_pad_left(seconds, '0', 2)

            if (this.total <= 0) {
                clearInterval(this.interval)
                this.$bus.$emit('Timer/stop')
            }

            this.total -= 1
        }
    }
}

What it does:
The props defines which parameter to receive from the parent component. In our case it represents the number of seconds that the timer will start from.

The data contains properties required for showing the current state of the timer and for allowing us to control the interval handler.

When mounted, the component reads the time parameter and initializes the interval at which it will update the progress.

Tick method is executed as defined in the mounted interval. It will generate pretty minutes and seconds padded with ‘0’.

When the total seconds get to 0 we’ll also $emit an event. See my previous post for learning how to implement Observer Pattern in Vue.

Integrating the timer in our app is as easy as:

<Timer :time="300" />

That’s all. Our Vue countdown timer components is ready.

Learn how to implement Vue Observer Pattern in your web app.

Probably one of my favorite design patterns is the Observer Pattern.
This design pattern allows you to subscribe and emit events from components of your app.

Different web frameworks offer different implementation of the Observer app.

Lucky me, implementing Observer in VueJS is piece of cake.

Actually the Observer in VueJS could be another Vue instance that we pass or make accessible by all our components.

import Vue from 'vue'
// create a new Bus which will handle all our events
const EventBus = new Vue()
// We need to assign the bus to the root component
Vue.prototype.$bus = EventBus

That’s all needed for the setup part.

You can now use this.$bus in all your Vue Components to subscribe and emit and dispatch events.

...
// some random component emits events
methods: {
    logout: function() {
        this.$bus.$emit('Some_Event/name', user)
    }
}
...
// some random component subscribes to the event
created: function() {
    this.$bus.$on('Some_Event/name', (data) => {
       this.logout_user(data)
    })
}

There are two possible ways of generating the events and it mostly depends on who we want to receive that event.

$emit – targeting whole app

The $emit method will trigger an event in the current instance.
This means that all subscribers will be notified of this event.

$dispatch – targeting parent components

The $dispatch method propagates the event up in the parent chain.
The first parent subscriber will stop the event from propagating further unless it returns true.

In my next post I’ll describe how to create a Countdown Timer Component in VueJS.
Adios!