We can create a stopwatch using Vue.js by using built in functions. In this article, we’ll find out how to make a simple stopwatch.

To start, we create new project with the Vue CLI by running npx @vue/cli.

We then select the default options to create a new Vue project.

Next, we can write the following code:

<template>
  <div id="app">
    <button @click="start">Start</button>
    <button @click="stop">Stop</button>
    <button @click="reset">Reset</button>
    <p>{{formattedElapsedTime}}</p>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      elapsedTime: 0,
      timer: undefined
    };
  },
  computed: {
    formattedElapsedTime() {
      const date = new Date(null);
      date.setSeconds(this.elapsedTime / 1000);
      const utc = date.toUTCString();
      return utc.substr(utc.indexOf(":") - 2, 8);
    }
  },
  methods: {
    start() {
      this.timer = setInterval(() => {
        this.elapsedTime += 1000;
      }, 1000);
    },
    stop() {
      clearInterval(this.timer);
    },
    reset() {
      this.elapsedTime = 0;
    }
  }
};
</script>

In the code above, we have the Start, Stop, and Reset buttons. Then we click thev Start, the start method is run, which creates the timer with setInterval and the this.elapsedTime state is updated.

The elapsedTime is converted to a formatted time string with minutes and seconds with the formattedElapsedTime computed property,

The Stop button runs the stop method when it’s clicked, which calls clearInterval to clear the timer.

The reset method is called by the Reset button and resets this.elapsedTime to 0.

Then we’ll see the stopwatch run when we click Start and the timer stops when we click Stop.

The stopwatch goes back to 0 after we click Reset.

Conclusion

We can create a Vue.js stopwatch without adding extra libraries. We just have to use setInterval and clearInterval to start and stop the stopwatch respectively.