document is not defined

[matheusliraofficial]

I'm struggling with this issue when I try to load my project in the browser.

error during render : /favicon.ico
ReferenceError: document is not defined
at addStyle (/Users/matheuslira/IdeaProjects/ingresso-prime-ssr/node_modules/v-calendar/lib/components/date-picker.umd.js:3180:22)
at addStylesToDom (/Users/matheuslira/IdeaProjects/ingresso-prime-ssr/node_modules/v-calendar/lib/components/date-picker.umd.js:3164:20)
at addStylesClient (/Users/matheuslira/IdeaProjects/ingresso-prime-ssr/node_modules/v-calendar/lib/components/date-picker.umd.js:3118:3)
at Object.8e2e (/Users/matheuslira/IdeaProjects/ingresso-prime-ssr/node_modules/v-calendar/lib/components/date-picker.umd.js:5849:14)
at webpack_require (/Users/matheuslira/IdeaProjects/ingresso-prime-ssr/node_modules/v-calendar/lib/components/date-picker.umd.js:30:30)
at Object.dd71 (/Users/matheuslira/IdeaProjects/ingresso-prime-ssr/node_modules/v-calendar/lib/components/date-picker.umd.js:8991:509)
at webpack_require (/Users/matheuslira/IdeaProjects/ingresso-prime-ssr/node_modules/v-calendar/lib/components/date-picker.umd.js:30:30)
at Module.fb15 (/Users/matheuslira/IdeaProjects/ingresso-prime-ssr/node_modules/v-calendar/lib/components/date-picker.umd.js:13077:75)
at webpack_require (/Users/matheuslira/IdeaProjects/ingresso-prime-ssr/node_modules/v-calendar/lib/components/date-picker.umd.js:30:30)
at /Users/matheuslira/IdeaProjects/ingresso-prime-ssr/node_modules/v-calendar/lib/components/date-picker.umd.js:94:18

[irakliShengelia]

Solution for NUXT

This is happening because Vcalendar is not meant to be rendered on the server side. At least that's what I've read.

What solved the issue for me was:

Step 1. Add a plugin in {ROOT_DIRECTORY}/plugins/vcalendar.js with following contents:

import Vue from 'vue'
import VCalendar from 'v-calendar'

// Use v-calendar & v-date-picker components
Vue.use(VCalendar, {
  // Options here
})

Step 2. Include the newly created plugin in the {ROOT_DIRECTORY}/nuxt.config.js as follows:

 plugins: [
    // Any Other Plugins Here
    //Make sure to specify ssr: false, this disables the plugin in server side rendering
    { src: '~/plugins/vcalendar.js', ssr: false}
  ],

This solved a similar issue for me

[matheusliraofficial]

This solution is only for nuxt.js

[irakliShengelia]

This solution is only for nuxt.js

Sorry, I was actually having a same issue on Nuxtjs and I was looking for a solution. Once I found it, just had a little brainfart and thought this was in the nuxt repository 😁 My apologies.