Revision history [back]

Here are the steps to utilize vue datepicker in Nuxt 3:

1. Install the vue-datepicker package by running the following command:

npm install vue-datepicker --save

1. Create a new Vue component and import the datepicker component:

<template>
  <div>
    <datepicker v-model="selectedDate"></datepicker>
  </div>
</template>

<script>
import Datepicker from 'vue-datepicker';

export default {
  components: {
    Datepicker,
  },
  data() {
    return {
      selectedDate: new Date(),
    };
  },
};
</script>

1. Use the component in your Nuxt 3 pages or other components:

<template>
  <div class="container">
    <DatePickerComponent/>
  </div>
</template>

<script>
import DatePickerComponent from '@/components/DatePickerComponent.vue'

export default {
  components: {
    DatePickerComponent
  }
}
</script>

1. You may need to add datepicker styles to your project. You can do this by adding the following line to your nuxt.config.js:

export default {
  head: {
    link: [
      {
        rel: 'stylesheet',
        href: 'https://unpkg.com/vue-datepicker/dist/vue-datepicker.min.css',
      },
    ],
  },
};

That's it! You can now use the vue datepicker component in your Nuxt 3 project.