“window is not defined” in Nuxt.js

问题

I get an error porting from Vue.js to Nuxt.js.

I am trying to use vue-session in node_modules. It compiles successfully, but in the browser I see the error:

ReferenceError window is not defined

node_modules\vue-session\index.js:

VueSession.install = function(Vue, options) {
    if (options && 'persist' in options && options.persist) STORAGE = window.localStorage;
    else STORAGE = window.sessionStorage;
    Vue.prototype.$session = {
        flash: {
          parent: function() {
            return Vue.prototype.$session;
          },

so, I followed this documentation:

rewardadd.vue:

import VueSession from 'vue-session';

Vue.use(VueSession);

if (process.client) {
  require('vue-session');
}

nuxt.config.js:

  build: {
    vendor: ['vue-session'],

But I still cannot solve this problem.

回答1:

UPDATED JULY 2020

The Window is not defined error results from nodejs server side scripts not recognising the window object which is native to browsers only.

As of nuxt v2.4 you don't need to add the process.client or process.browser object.

Typically your nuxt plugin directory is structured as below:

~/plugins/myplugin.js

import Vue from 'vue';
// your imported custom plugin or in this scenario the 'vue-session' plugin
import VueSession from 'vue-session';

Vue.use(VueSession);

And then in your nuxt.config.js you can now add plugins to your project using the two methods below:

METHOD 1:

Add the mode property with the value 'client' to your plugin

plugins: [
    { src: '~/plugins/myplugin.js', mode: 'client' }
  ]

METHOD 2: (Simpler in my opinion)

Rename your plugin with the extension .client.js and the add it to you plugins in the nuxt.config.js plugins. Nuxt 2.4.x will recognize the plugin extension as to be rendered on the server side .server.js or the client side .client.js depending on the extension used.

NOTE: Adding the file without either the .client.js or .server.js extensions will render the plugin on both the client side and the server side.Read more here.

plugins: [
    { src: '~/plugins/myplugin.client.js' }
  ]

回答2:

There is no window object on the server side rendering side. But the quick fix is to check process.browser.

  created(){
    if (process.browser){
      console.log(window.innerWidth, window.innerHeight);
    }
  }

This is a little bit sloppy but it works. Here's a good writeup about how to use plugins to do it better.

回答3:

Its all covered in nuxt docs and in faq. First you need to make it a plugin. Second you need to make your plugin client side only

  plugins: [
    { src: '~/plugins/vue-notifications', ssr: false }
  ]

Also vendor is not used in nuxt 2.x and your process.client not needed if its in plugin with ssr false

回答4:

If you've tried most of the answers here and it isn't working for you, check this out, I also had the same problem when using Paystack, a payment package. I will use the OP's instances

Create a plugin with .client.js as extension so that it can be rendered on client side only. So in plugins folder, create a file 'vue-session.client.js' which is the plugin and put in the code below

import Vue from 'vue'
import VueSession from 'vue-session'
//depending on what you need it for
Vue.use(VueSession)
// I needed mine as a component so I did something like this
Vue.component('vue-session', VueSession)

so in nuxt.config.js, Register the plugin depending on your plugin path

plugins:[
...
{ src: '~/plugins/vue-session.client.js'},
...
]

In index.vue or whatever page you want to use the package... import the package on mounted so it is available when the client page mounts...

export default {
 ...
 mounted() {
   if (process.client) {
     const VueSession = () => import('vue-session')
   }
 }
...
}

回答5:

Lazy loading worked for me. Lazy loading a component in Vue is as easy as importing the component using dynamic import wrapped in a function. We can lazy load the StepProgress component as follows:

export default {
  components: {
    StepProgress: () => import('vue-step-progress')
  }
};

回答6:

You can check if you're running with client side or with the browser. window is not defined from the SSR

const isClientSide: boolean = typeof window !== 'undefined'

来源：https://stackoverflow.com/questions/54979644/window-is-not-defined-in-nuxt-js

标签

Vue.js

nuxt.js