Nuxt.js document is not defined (vuejs-datepicker)

Question

---

i did all thing (maybe) to solve this problem but my little error keep coming out....:(

---

First. my error-
my "vuejs-datepicker" work well when load page first time.
BUT when i reload it, "Reference Error" show up...
my error screen

---

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.component('vuejs-datepicker',DatePicker)
• in script of vue,
  change components: {datepicker}
  to components: {'datepicker': () => import('vuejs-datepicker')},

---

so, what else should i do now??
Any ideas?
Thanks..

Answer 1

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 component

  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.component('date-picker', Datepicker)

  In this step you are registering as date-picker in the context your component, 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 component only from the client side.

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

  <date-picker..options/>

  You don't need to import anything in the component, this date-picker now is available on every component 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
• components-client-only

Answer 2

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

Answer 3

//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>