Nuxt.js: Despite SSR = false, ... Error "ReferenceError: document is not defined"

Created on 2 Nov 2017  路  5Comments  路  Source: nuxt/nuxt.js

Despite SSR as false on the configuration, i have a
"document is not defined" or "window is not defined"

nuxt Config file

plugins: [{ src: '~/plugins/vuehoteldatepicker', ssr: false }],
  build: {
    vendor: ['axios','vue-hotel-datepicker'],

Plugin file

import Vue from 'vue'
import VueHotelDatepicker from 'vue-hotel-datepicker'

Vue.use(VueHotelDatepicker)

export default VueHotelDatepicker

Page

<template>
  <section class="container">
      <VueHotelDatepicker format="DD/MM/YYYY">
      </VueHotelDatepicker>
  </section>
</template>

<script>
import VueHotelDatepicker from '~/plugins/vuehoteldatepicker'
export default {
  head () {
    return {
      title: 'Test'
    }
  },
  components: {
    VueHotelDatepicker: VueHotelDatepicker
  }
}
</script>

I need some help :) Did i something wrong ?

This question is available on Nuxt.js community (#c1784)
help-wanted

Most helpful comment

It's because your import plugin to page component, ssr: false can't help you if you add browser only plugin to your build manually. ssr: false just instruct Nuxt to add this plugin before instantiating the application only for browser build.

Anyway in your case your plugin file should look like:

import Vue from 'vue'
import VueHotelDatepicker from 'vue-hotel-datepicker'

Vue.component('hotel-date-picker', VueHotelDatepicker)

And you don't need to import this plugin to page

All 5 comments

It's because your import plugin to page component, ssr: false can't help you if you add browser only plugin to your build manually. ssr: false just instruct Nuxt to add this plugin before instantiating the application only for browser build.

Anyway in your case your plugin file should look like:

import Vue from 'vue'
import VueHotelDatepicker from 'vue-hotel-datepicker'

Vue.component('hotel-date-picker', VueHotelDatepicker)

And you don't need to import this plugin to page

Thank you :) The plugin file is now modified

How do i use the plugin in the page then ?

Do i need to specify the component in the page before use it on the template ?

You don't need to import your plugin to page component or add component definition. Your application already know about this component because of Vue.component('hotel-date-picker', VueHotelDatepicker)

Thank you ^^

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

bimohxh picture bimohxh  路  3Comments

shyamchandranmec picture shyamchandranmec  路  3Comments

mikekidder picture mikekidder  路  3Comments

VincentLoy picture VincentLoy  路  3Comments

vadimsg picture vadimsg  路  3Comments