V-calendar: Nuxt.js helpers integration

[Erigers]

I am having issues integrating with Nuxt. Currently, I added it as a plugin in the build, but it's throwing an error when I try using v-date-picker.

[Vue warn]: Unknown custom element: <v-date-picker> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <SmallComponent> at components/smallCalendar.vue
       <NoSsr>
         <Homepage> at pages/homepage.vue
           <Nuxt>
             <Default> at layouts/default.vue
               <Root>

Apparently it's failing to recognise the children components of the package. Any idea how can I fix it?

[nathanreyes]

I'm able to use the plugin on the landing page, which is running on nuxt at the moment.

Is something like the following in your nuxt.config.js?

  plugins: [{ src: '~/plugins/v-calendar', ssr: false }],

...with the following in v-calendar.js

import Vue from 'vue';
import VCalendar from 'v-calendar';
Vue.use(VCalendar);

..then when using you need to wrap in <no-ssr> tags, which it looks like you are doing already.

[Erigers]

That is exactly what I've used, but the error is shown when I use v-date-picker.

[appinteractive]

@Erigers did you got it working? For me its the same, have no idea why.

[appinteractive]

forgett it, I needed to restart nuxt for some reason.

[jdm85kor]

I hope this post helps.
https://medium.com/@Dongmin_Jang/nuxtjs-how-to-set-v-calendar-c1bbd75af7b5

[mauchchhash]

I temporarily fixed it. Here are my relavant files:
In the plugins/v-date-picker.js:

import Vue from 'vue';
import VDatePicker from 'v-calendar/lib/components/date-picker.umd';
Vue.component('v-date-picker', VDatePicker)

In the nuxt.config.js:

{
  src: "@/plugins/v-date-picker",
  ssr: false
},

and then I used <v-date-picker> tag inside <no-ssr> or <client-only> tags:

<no-ssr>
  <div>
    <v-date-picker
      v-model='quoteField.moveDate'
      mode='single'
      is-required
      :input-props="{
                    placeholder: 'Please select your pickup date.',
                    id: 'pickup-date',
                    required: true,
                    }"
      />
  </div>
</no-ssr>