nuxt: 'Window is not defined' where do I put client-side only scripts?

Hi, Yes, this is exactly due to the server-side rendering. If you need to specify that you want to import a ressource only on the client-side inside, you need to you process.browser variable.

.vue file

<script>
if (process.browser) {
  require('aframe')
}
export default {

}
</script>

nuxt.config.js

  build: {
    vendor: ['aframe']
  }

Thanks for your report, the documentation of the website will be completed soon.

Vue-FullCalendar app/plugins/vue-fullcalendar.js

import Vue from 'vue'

if (process.browser) {
  window.onNuxtReady(() => {
    const VueFullCalendar = require('vue-fullcalendar')
    Vue.use(VueFullCalendar)
  })
}

I know this issue is closed and all, but I just want to point out an alternate solution - Vue’s lifecycle hooks. All hooks except for beforeCreate and created do not even run on the server. If you’re doing any client-side manipulation or inspection and referencing built-in browser globals like window or document, then you should do those things in these hooks. This solution removes the need to inspect environment variables.

Documentation

Currently, nuxt.js 1.0.0-rc11, it is process.browser and not process.BROWSER_BUILD inside a component.

Thanks @Atinux. I also found I can use import by moving my code out from the page into a component and use ssr: false when loading that plugin in the nuxt.config.js.

@andrewharvey could you provide more details or an example of this implementation using the import statement?

I have experinced similar issues as well. I was trying to import a vue UI framework element-ui. However, it references window object and several native browser functions like addEventListener etc., so it breaks the server rendering. I’m thinking if there is any way to polyfill it somehow. Because for such kind of UI framework, if we cannot render it on server side, it doesn’t quite make sense and is probably not usable for SEO purpose.

I’ve also treid next.js with antd ( a UI framework built on React.js which similar to element-ui ) and it worked almost perfectly ( except that next.js is using glamor as a css-in-js solution which is pretty hacky). When I have time I’ll dig more for the reason why it’s working in next.js but not nuxt.js.

The only way I found to make scripts load only on the client side is to require them in one of the hooks that are not executed on the server side.

So for example with mapbox-gl you first set a parameter mapboxgl into the data () object. Then inside your hook (for example mounted ()) you require mapbox-gl and assign it to the new parameter.

<script>
export default {
  data () {
    return {
      mapboxgl: null
    }
  },
  mounted () {
    this.maboxgl = require('mapbox-gl')
  }
}
</script>

You have to use require at the moment @andrewharvey and ask for the library author to add SSR support (by giving him this link if it’s a Vue.js library: https://ssr.vuejs.org/en/universal.html)

I’m closing this issue since the question has been answer by @alexchopin by using process.BROWSER_BUILD.

How would that work if we are using import instead of require? If I put my import inside the if statement I get:

NuxtServerError Module build failed: SyntaxError: 'import' and 'export' may only appear at the top level

This is the best answer I’ve ever seen. Thanks

Hi, Yes, this is exactly due to the server-side rendering. If you need to specify that you want to import a ressource only on the client-side inside, you need to you process.BROWSER_BUILD variable.[…]

why is this still not in the docs? I followed what was there and was still having issues importing a vue plugin. this solution cleared things up

the plugin in question: https://github.com/Wanderxx/vue-fullcalendar

@Atinux I mean I’m pretty sure that antd has some window object references as well. But when I tried it, it did work with next.js. However it probably because that antd is more modular and I missed the browser specific part of the variable references. Anyway I’m going to test more.

Update: I’ve found that in antd it’s using if (typeof window !== 'undefined') to check if it’s in the browser. So as you said, it’s the plugin’s issue and it shouldn’t directly reference window object without envirument detection. element-ui IMO is a bit buggy.

I think that every vue plugin should be able to work both client-side and server-side since the version 2.0 of Vue.js.

I asked the team behind element-ui but they said it’s not their priority, but I don’t think it will be complicated to make it compatible with server-side rendering, since we will only have to add if statement where a client-side only function is called.

@andyhu what library are you talking about which is working with next.js but not nuxt.js?