Second. what i did-

• add /plugins/vuejs-datepicker file

  import Vue from 'vue';
  import Datepicker from 'vuejs-datepicker';
  
  Vue.use(Datepicker);
  

• add plugins : [{ src: '~plugins/vuejs-datepicker', ssr: false }] in nuxt.config.js

• use client-only in template

  <client-only> <datepicker :inline="true"></datepicker> </client-only>

Third. even did this-

• in /plugins/vuejs-datepicker file,
  change Vue.use(Datepicker) to Vueponent('vuejs-datepicker',DatePicker)
• in script of vue,
  change ponents: {datepicker}
  to ponents: {'datepicker': () => import('vuejs-datepicker')},

Second. what i did-

• add /plugins/vuejs-datepicker file

  import Vue from 'vue';
  import Datepicker from 'vuejs-datepicker';
  
  Vue.use(Datepicker);
  

• add plugins : [{ src: '~plugins/vuejs-datepicker', ssr: false }] in nuxt.config.js

• use client-only in template

  <client-only> <datepicker :inline="true"></datepicker> </client-only>

Third. even did this-

• in /plugins/vuejs-datepicker file,
  change Vue.use(Datepicker) to Vue.ponent('vuejs-datepicker',DatePicker)
• in script of vue,
  change ponents: {datepicker}
  to ponents: {'datepicker': () => import('vuejs-datepicker')},

• javascript
• vue.js
• datepicker
• nuxt.js

3 Answers 3

You were almost there!

It means that vuejs-datepicker doesn't work on SSR.

I faced the same issue and Following this guide I could resolve the problem.

• First of all you must install the ponent

  npm i vuejs-datepicker
  

• Secondly, you need to create a plugin file, under plugins directory, for instance: vue-datepicker.js with the following content:

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

  In this step you are registering as date-picker in the context your ponent, imported from vuejs-datepicker, this name is important because is the one you will use insted of the original datepicker.

• Next step is register your new plugin in nuxt.config.js

  plugins : [
            ...OthersPlugins,
             { src: '~/plugins/vue-datepicker', mode: 'client' }
            ] 
  

  In this way you will be using this ponent only from the client side.

• The final step is enjoy your Datepicker as date-picker in your ponent or page, but now with the name used in the Second Step

  <date-picker ..options/>
  

  You don't need to import anything in the ponent, this date-picker now is available on every ponent or page in the project as it.

• The very Last step, which is optional is to wrap this date-picker with client-only tag, if you want to show any message while the date-picker is loading.

For more info about this please read:

• configuration-plugins
• ponents-client-only

It means vuejs-datepicker dont work on SSR. You need to use it only on client. See https://nuxtjs/api/ponents-client-only/ and https://nuxtjs/guide/plugins/#client-side-only

//plugin.js   
 import Vue from 'vue';
 import Datepicker from 'vuejs-datepicker';    
 Vue.use(Datepicker);

//nuxt.config.js

plugins : [
           { src: '~/plugins/plugin.js', ssr: false},
          ] 

//usage

<div>
<client-only>
<Datepicker />    
</client-only>

</div>