Complete Vue.js 2 Web Development_ Practical guide to building end-to-end web development solutions with Vue.js 2

Integrating with Other Frameworks Chapter 19

In our template, we want a formattedTime method in the sense that we'd like to see the

time in mm:ss format, which is much more human-readable than just the number of

remaining seconds (even if that's more geeky), so we need to add the computed function:

computed: {

formattedTime () {

const pad = num => ('0' + num).substr(-2)

const minutes = Math.floor(this.remainingTime / 60)

const seconds = this.remainingTime - minutes * 60

return `${minutes}:${pad(seconds)}`

}

}

To add this component to the app, go to the App.vue file and edit the following lines,

replacing the landingPage placeholder element:

<template>

<div id="#app">

<pomodoro></pomodoro>

</div>

</template>

<script>

import Pomodoro from 'components/Pomodoro'

export default {

components: {

Pomodoro

}

}

</script>

Launching the app with npm run dev, you should now be able to track the time while

working or studying: