How to Display Time in NuxtJS ?

0 0 2 minutes read

In this article, we are going to learn how we can show time in NuxtJs. Nuxt.js is a free and open-source web application framework based on Vue.js, Node.js, Webpack, and Babel.js. Nuxt is inspired by Next.js, which is a framework of similar purpose, based on React.js.

Approach: To show time in nuxtjs we are going to use the vue-time package. The vue-time package helps us to add a time anywhere in our app. So first, we will install the vue-time package and then we will create a vue-time.js file in our plugins folder then we will add the time in our app.

Create NuxtJS Application:

Step 1: You can create a new NuxtJs project using the below command:

npx create-nuxt-app gfg

Step 2: Now navigate to your app using the following command:

cd gfg

Step 3: Install the required package. Now we will install the vue-time package using the below command:

npm i vue-time

Project Structure: It will look like this.

Step 4: Create a new file with the name ‘vue-time.js‘ inside the plugins folder. After creating the file add the below content in the file.

vue-time.js

import Vue from 'vue'
import vueTime from 'vue-time'
Vue.component('vue-time', vueTime)

Step 5: Inside the nuxt.config.js file add the below line inside the plugins section:

nuxt.config.js

plugins: [ 
    '@/plugins/view-ui', 
    { src: '~/plugins/vue-time', ssr: false }, 
  ],

Step 6: Now to add time inside our app add the below lines inside the index.vue file in pages folder.

index.vue

<template> 
  <div> 
    <h4>zambiatek - NuxtJs Time</h4> 
    <vue-time :show-date="showDate" : 
               show-day="showDay" : 
               show-time="showTime"></vue-time> 
  </div> 
</template> 
  
<script> 
  export default { 
    data() { 
      return { 
        showDate: false, 
        showDay: false, 
        showTime: true, 
        options: { 
          hour12: true, 
          era: 'long', 
          weekday: 'long', 
          year: 'numeric', 
          month: 'numeric', 
          day: 'numeric'
      } 
    } 
  } 
  } 
</script> 

Explanation: In the above example first, we created the vue-time file in the plugin folder and added the path in nuxt.config.js file. Now we can use the vue-time package anywhere in our app. To add the time we used the <vue-time> component in our index.vue file.

Steps to run the application: Run the below command in the terminal to run the app.

npm run dev

Output:

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, zambiatek Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!