Skip to content
Related Articles
Open in App
Not now

Related Articles

How to add DatePicker in NuxtJS ?

Improve Article
Save Article
  • Last Updated : 13 Dec, 2021
Improve Article
Save Article

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.


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:


plugins: [
    { 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.


    <h4>GeeksforGeeks - NuxtJs DatePicker</h4>
      v-model="date_today" />
  export default {
    data() {
      return {
        date_today:new Date()

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.

npm run dev


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!