How to add DatePicker in NuxtJS ?

Last Updated : 13 Dec, 2021

In this article, we are going to learn how we can add a Datepicker 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 add our DatePicker we are going to use the vuejs-datepicker package. The vuejs-datepicker package helps us to add a DatePicker anywhere in our app. So first, we will install the vuejs-datepicker package and then we will create a vue-datepicker.js file in our plugins folder then we will add the datepicker in our app.

Create NuxtJS Application: You can create a new NuxtJs project using the below command:

npx create-nuxt-app gfg

Install the required package: Now we will install the vuejs-datepicker package using the below command:

npm i vuejs-datepicker

Project Structure: It will look like this

Adding the DatePicker: To add our datepicker, we have to follow the below steps:

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

Javascript

import Vue from 'vue'
import Datepicker from 'vuejs-datepicker'
Vue.component('date-picker', Datepicker)

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

nuxt.config.js

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

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

index.vue

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

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

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