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

Then, we don't really want the boilerplate components in the

app/src/render/components folder, so you can delete everything. Instead, create a

Pomodoro.vue file and put this template inside:

<template>

<div class="pomodoro">

<p>Time remaining: {{formattedTime}}</p>

<button v-if="remainingTime === 1500" @click="start">Start</button>

<button v-else @click="stop">Stop</button>

</div>

</template>

To make it work, we also have to write the JavaScript part, as follows:

<script>

export default {

data () {

return {

remainingTime: 1500,

timer: undefined

}

},

methods: {

start () {

this.remainingTime -= 1

this.timer = setInterval(() => {

this.remainingTime -= 1

if (this.remainingTime === 0) {

clearInterval(this.timer)

}

}, 1000)

},

stop () {

clearInterval(this.timer)

this.remainingTime = 1500

}

}

}

</script>

This way, clicking on the start button in the program will subtract 1 second every second.
Clicking on the stop button will clear the timer and reset the remaining time to 1500

seconds (25 minutes). The timer object is basically the result of the setInterval operation,

and clearInterval just stops whatever the timer was doing.