¿Cómo agregar DatePicker en NuxtJS?

En este artículo, vamos a aprender cómo podemos agregar un Datepicker 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 agregar nuestro DatePicker vamos a usar el paquete vuejs-datepicker. El paquete vuejs-datepicker nos ayuda a agregar un DatePicker en cualquier lugar de nuestra aplicación. Primero, instalaremos el paquete vuejs-datepicker y luego crearemos un archivo vue-datepicker.js en nuestra carpeta de complementos y luego agregaremos el selector de fecha en nuestra aplicación.

Crear aplicación NuxtJS: puede crear un nuevo proyecto NuxtJs usando el siguiente comando:

npx create-nuxt-app gfg

Instale el paquete requerido: ahora instalaremos el paquete vuejs-datepicker usando el siguiente comando:

npm i vuejs-datepicker

Estructura del proyecto: se verá así

Agregando el selector de fecha: Para agregar nuestro selector de fecha, debemos seguir los siguientes pasos:

Paso 1: Cree un nuevo archivo con el nombre ‘ vue-datepicker.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 Datepicker from 'vuejs-datepicker'
Vue.component('date-picker', Datepicker)

Paso 2: 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-datepicker', ssr: false },
  ],

Paso 3: Ahora, para agregar DatePicker 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 DatePicker</h4>
    <client-only>
      <date-picker
      placeholder="MM/DD/YYYY"
      format="MM/dd/yyyy"
      v-model="date_today" />
    </client-only>
  </div>
</template>
  
<script>
  export default {
    data() {
      return {
        date_today:new Date()
      }
    }
  }
</script>

Explicación: en el ejemplo anterior primero, creamos el archivo vue-datepicker en la carpeta del complemento y agregamos la ruta en el archivo nuxt.config.js. Ahora podemos usar el paquete datepicker en cualquier lugar de nuestra aplicación. Para agregar el selector de fechas, usamos el componente <date-picker> 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: