Nuxt.js: 'window is not defined' when importing ScrollMagic

[maziarz]

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

_{This question is available on Nuxt.js community (#c1650)}

[KonstantinVlasov]

You should use "ssr:false" plugins only in browser environment. You can check it by process.browser. Or you can use it in mounted hook.

[maziarz]

@KonstantinVlasov, not 100% sure if i understand this correctly, but shouldn't the ssr parameter fix this?

[KonstantinVlasov]

No, this parameter tells Nuxt to include this plugin only for browser build, but you manually import it in both enviroment.

[maziarz]

Ah. Did not see this https://nuxtjs.org/faq/window-document-undefined

But is there a full example showing how this is done?

[f15gdsy]

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

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

[uptownhr]

Do you need this code for the server?

[uptownhr]

Can you show us an example of how scroll magic will be used? You may just want to require from your mounted life cycle hook

[maziarz]

I do not need this code for server, only client-side..

[pirony]

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 :)

[maziarz]

@pirony, that sounds awesome! I can surely wait..

[pirony]

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. ^^

[maziarz]

@pirony thats excellent! will give it a go!! :-) Will it also work programmatically? I only plan to use the ScrollMagic object in functions.. No fancy components in this iteration..

[Atinux]

Love this thread!

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

[pirony]

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

[maziarz]

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

[hackuun]

@pirony awesome! Thank you!

[lock[bot]]

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.