Vue 3 Projects

Create a Pomodoro Timer App with Vue 3 and JavaScript

Spread the love

Vue 3 is the latest version of the easy to use Vue JavaScript framework that lets us create front end apps.

In this article, we’ll look at how to create a password generator app with Vue 3 and JavaScript.

Create the Project

We can create the Vue project with Vue CLI.

To install it, we run:

npm install -g @vue/cli

with NPM or:

yarn global add @vue/cli

with Yarn.

Then we run:

vue create pomodoro-timer

and select all the default options to create the project.

Create the Pomodoro Timer

To create the Pomodoro timer app, we write:

  <h1>Pomodoro Timer</h1>
  <button @click="start">start</button>
  <div>{{ secondsLeft }} seconds left</div>

export default {
  name: "App",
  data() {
    return {
      secondsLeft: 25 * 60,
      timer: undefined,
  methods: {
    start() {
      this.timer = setInterval(() => {
        if (this.secondsLeft === 0) {
      }, 1000);
  beforeUnmount() {

In the template, we have the start button to let us start the timer when we click it.

The div displays the number of seconds left before the time is up.

In the data method, we return reactive properties with the secondsLeft and the timer reactive properties.

The start method calls setInterval to start the timer.

We decrement the secondsLeft reactive property’s value until secondsLeft is 0.

If it’s 0, then we call clearInterval to clear the timer.

1000 is the interval to wait before the callback runs again.

In the beforeUnmount hook, we call clearInterval to clear the timer when we unmount the component.

When we click start, we should see the seconds count down on the page.


We can create a Pomodoro timer easily with Vue 3 and JavaScript.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *