Create a Countdown Timer App with Vue 3 and JavaScript

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 countdown timer 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 digital-clock

and select all the default options to create the project.

Create the Countdown Timer App

To create the countdown timer, we write:

<template>
  <p>
    {{ diff.year }} years, {{ diff.month }} months, {{ diff.day }} days,
    {{ diff.hour }} hours, {{ diff.minute }} minute, {{ diff.second }} seconds
    until
    {{ formatDate(futureDate) }}
  </p>
</template>

<script>
const futureDate = new Date(2050, 0, 1);
const getDateDiff = (date1, date2) => {
  const diff = new Date(date2.getTime() - date1.getTime());
  return {
    year: diff.getUTCFullYear() - 1970,
    month: diff.getUTCMonth(),
    day: diff.getUTCDate() - 1,
    hour: diff.getUTCHours(),
    minute: diff.getUTCMinutes(),
    second: diff.getUTCSeconds(),
  };
};
export default {
  name: "App",
  data() {
    return {
      futureDate,
      diff: {},
      timer: undefined,
    };
  },
  methods: {
    getDiff() {
      this.diff = getDateDiff(new Date(), futureDate);
    },
    formatDate(date) {
      let d = new Date(date),
        month = (d.getMonth() + 1).toString(),
        day = d.getDate().toString(),
        year = d.getFullYear().toString();

      if (month.length < 2) month = "0" + month;
      if (day.length < 2) day = "0" + day;

      return [year, month, day].join("-");
    },
  },
  beforeMount() {
    this.timer = setInterval(this.getDiff, 1000);
  },
  beforeUnmount() {
    clearInterval(this.timer);
  },
};
</script>

In the template, we display the date and time diff parts and the date we’re counting down towards.

Then in the script tag, we have the futureDate to count down to.

getDateDiff lets us get the date difference.

We get the date difference by subtracting the UNIX timestamp version of date2 and date1 .

We get the timestamp with getTime .

Then we get the parts of the date difference wirthr the built in Date instabnce methods.

getUTCFullYear gets the number of years in the diff .

We subtract that by 1970 to get the year of the diff .

getUTCMonth returns the number of months of the diff .

getUTCDate returns the number of days of the diff .

getUTCHours returns the number of hours of the diff .

getUTCMinutes returns the number of minutes of the diff .

getUTCSeconds returns the number of seconds of the diff .

We pass in the futureDate into the object we return with data so we can use it in the template.

getDiff calls getDateDiff to get the difference between the current date time and futureDate .

formatDate lets us format the futureDate to yyyy-mm-dd format.

We do this by getting the month with getMonth .

We use getDate to get the number of days.

And we ye getFullYear to get the number of years.

If month and day have less than 2 digits, then we add a 0 before the month and day strings.

Then in the beforeMount hook, we call setInterval with getDiff to compute the date difference between the current date time and futureDate .

setInterval calls the callback in the first argument periodically.

1000 is the interval in milliseconds we wait before calling the getDiff method again.

We assign the returned timer object to this.timer .

Then we call clearInterval in beforeUnmount to clear the timer when we unmount the component.

Conclusion

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