nuxt: 'window is not defined' when importing ScrollMagic

I am trying to import ScrollMagic, but receiving the much known window is not defined. As i understand i need to import the library as a plugin and switch off SSR, but unfortunately this is not working.

plugins/scrollmagic.js

import ScrollMagic from 'scrollmagic'

export default ScrollMagic

nuxt.config.js

  plugins: [
    {
      src: '~/plugins/scrollmagic', ssr: false
    }
  ],

views/test-component.vue

<script>
import ScrollMagic from '~/plugins/scrollmagic'
export default {
}
</script>

error:

[vue-router] Failed to resolve async component default: ReferenceError: window is not defined [vue-router] uncaught error during route navigation: ReferenceError: window is not defined

skaermbillede 2017-10-12 kl 15 02 12

<div align="right">_{This question is available on Nuxt.js community (#c1650)}</div>

About this issue

Original URL
State: closed
Created 7 years ago
Comments: 17 (1 by maintainers)

Most upvoted comments

Here we are… https://github.com/pirony/ks-vue-scrollmagic

npm i --save ks-vue-scrollmagic

then in ~/plugins/ksVueScr.js

import Vue from 'vue'
import KsVueScrollmagic from 'ks-vue-scrollmagic'
Vue.use(KsVueScrollmagic)

and finally add it to nuxt.config with ssr:false option. You should be good to go.

You can see it in action here

Keep in mind that this vue-plugin is still in active developement… not yet production ready! Btw, the v-scrollmagic directive binding value MUST follow a predefined schema… I’ll explained which one more deeply later. Sorry for teasing, but it’s a bit late in France now. ^^

pirony on Oct 19, 2017

I’ ve updated the plugin, and made some big changes… The way I handled tweening was a bit verbose and had limitations (Scrollmagic is very versatile and I couldn’t find a pattern that could work in every cases (or at least the majority).

Check this fiddle to see how it works now! Give it a try and feel free to open an issue here if you have questions and/or difficulties and/or enhancements proposal

pirony on Oct 19, 2017

Love this thread!

The help of each others to solve the issue and make a Vue plugin fully functional with Nuxt.js ❤️

Atinux on Oct 16, 2017

I’ m creating a plugin to use scrollmagic with vuejs and nuxt easily… it works but I did not pushed the update to npm and github yet. I’ll do it tomorrow, if you can wait a bit 😃

pirony on Oct 12, 2017

@pirony, thats so awesome! Good job mate!!!

maziarz on Oct 19, 2017

let Scrollmagic
if (typeof window === 'undefined') {
    Scrollmagic = require('scrollmagic')
}

This code should run without error on both client & server side.

f15gdsy on Oct 12, 2017