How use vue datepicker in nuxt3

Question

I trying to use the vue-datepicker (https://vue3datepicker.com/installation/) with no success First I create one class on my \plugins directory: ('\plugins\vue-datepicker.js')

import Datepicker from '@vuepic/vue-datepicker';
  
export default defineNuxtPlugin(nuxtApp => {
  nuxtApp.vueApp.use(Datepicker)
})

then I try to use in my app

<Datepicker />

but I got this erro:

runtime-core.esm-bundler.js:38 [Vue warn]: Failed to resolve component: DatePicker
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. 

Answer 1

I'm not sure if correct or not, but it works for me

plugins/vuedatepicker.js

import VueDatePicker from "@vuepic/vue-datepicker";
import "@vuepic/vue-datepicker/dist/main.css";

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.component("vue-date-picker", VueDatePicker);
});

index.uve

<template>
  ...
  <vue-date-picker v-model="value"></vue-date-picker>
  ...
</template>

or Local

nuxt.config.ts

ref: https://vue3datepicker.com/installation/#nuxt

export default defineNuxtConfig({
  build: {
    transpile: ["@vuepic/vue-datepicker"],
  },
});

index.vue

<template>
  <vue-date-picker v-model="currentValue"></vue-date-picker>
</template>

<script>
import VueDatePicker from "@vuepic/vue-datepicker";
import "@vuepic/vue-datepicker/dist/main.css";

export default {
  ...
  components: {
    VueDatePicker,
  },
  ...
}
</script>