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

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

user_9300379 · Answer

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

user_239354 · Answer

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

user_17899686 · Answer

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

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

3 Answers