Digital Clock using Vue 3 Composition API

Hello Readers,

In this blog post we will see how can we create a digital clock using Vue 3 composition API. Composition API is a new feature added in Vue through which we can reuse the code in multiple vue component.

For more details about how to use composition API you can refer my previous blog. I providing a link - go through it for basic information about it.

What is Composition API in Vue 3

Snehal Rajeev Moon ・ Dec 23 '21

#javascript #codenewbie #vue #webdev

So let's start with main topic.

First we need to create a component named as DigitalClock.vue

<template>
  <div class="flex h-screen">
    <div class="w-full lg:w-1/4 m-auto p-7 shadow-lg shadow-pink-400 border-4 border-t-purple-600 border-r-pink-600 border-b-pink-600 border-l-indigo-600  bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500">
      <!-- <p class="font-bold text-white text-lg">{{ currentTime.toLocaleString() }}</p> -->
      <p class="font-bold text-white pt-3 text-6xl">{{ currentTime.toLocaleTimeString() }}</p>
      <p class="font-bold text-white text-sm mb-1 flex justify-end mr-3">{{ currentTime.toLocaleDateString() }}</p>
    </div>
  </div>
</template>
<script>
import { useCurrentTime } from "../composables/useCurrentTime";
export default {
  name: "CurrentTimeExample",
  setup() {
    const { currentTime } = useCurrentTime();
    console.log(currentTime.value);
    return { currentTime };
  },
};
</script>

In the above code we are calling useCurrentTime method from the useCurrentTime.js file where we are going to write our main logic using composition api and from that we will call a currentTime and return its value to the component.

To create a composition api's we will create a folder named as composables where we keep/create all composition api's.

As stated above create a folder named as composables in src folder and create js file as useCurrentTime.js. (src/composables/useCurrentTime.js)

import { ref, onBeforeUnmount } from "vue";

export const useCurrentTime = () => {
  const currentTime = ref(new Date());
  const updateCurrentTime = () => {
    currentTime.value = new Date();
  };
  const updateTimeInterval = setInterval(updateCurrentTime, 1000);
  onBeforeUnmount(() => {
    clearInterval(updateTimeInterval);
  });
  return {
    currentTime,
  };
};

In above code we have created a const variable as currentTime which holds current Date and Time, and a method updateCurrentTime to update the current time. There is an another method called as updateTimeInterval which will update the time after given set of interval.
You can see a hook called as onBeforeUnmount() which will clear the currentTime when component is unmounted.
And the last thing is we are returning the current time, so wherever we have used/called this useCurrenttTime.js we will have the value.

In this way wherever we require the date n time we can reuse this code by simply importing it to the component.

You can also refer live demo in sandbox.

Happy Reading.. 🦄 🦁