¿Cómo mostrar la hora en NuxtJS?

En este artículo, vamos a aprender cómo podemos mostrar el tiempo en NuxtJs. Nuxt.js es un marco de aplicación web gratuito y de código abierto basado en Vue.js, Node.js, Webpack y Babel.js. Nuxt está inspirado en Next.js, que es un framework de propósito similar, basado en React.js.

Enfoque: Para mostrar el tiempo en nuxtjs vamos a utilizar el paquete vue-time. El paquete vue-time nos ayuda a agregar una hora en cualquier lugar de nuestra aplicación. Primero, instalaremos el paquete vue-time y luego crearemos un archivo vue-time.js en nuestra carpeta de complementos y luego agregaremos la hora en nuestra aplicación.

Crear aplicación NuxtJS: 

Paso 1: puede crear un nuevo proyecto NuxtJs usando el siguiente comando:

npx create-nuxt-app gfg

Paso 2: Ahora navegue a su aplicación usando el siguiente comando:

cd gfg

Paso 3: Instale el paquete requerido. Ahora instalaremos el paquete vue-time usando el siguiente comando:

npm i vue-time

Estructura del proyecto: Se verá así.

Paso 4: Cree un nuevo archivo con el nombre ‘ vue-time.js ‘ dentro de la carpeta de complementos. Después de crear el archivo, agregue el siguiente contenido en el archivo.

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

Paso 5: dentro del archivo nuxt.config.js , agregue la siguiente línea dentro de la sección de complementos:

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

Paso 6: Ahora, para agregar tiempo dentro de nuestra aplicación, agregue las siguientes líneas dentro del archivo index.vue en la carpeta de páginas.

<template>
  <div>
    <h4>GeeksforGeeks - 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>

Explicación: en el ejemplo anterior primero, creamos el archivo vue-time en la carpeta del complemento y agregamos la ruta en el archivo nuxt.config.js. Ahora podemos usar el paquete vue-time en cualquier lugar de nuestra aplicación. Para agregar el tiempo, usamos el componente <vue-time> en nuestro archivo index.vue.  

Pasos para ejecutar la aplicación: Ejecute el siguiente comando en la terminal para ejecutar la aplicación.

npm run dev

Producción: