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>neveropen - 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:
