soixantecircuits / idle-vue

Vue component wrapper for idle-js
MIT License
125 stars 40 forks source link

reference error: "window is not defined" when using in Nuxt.js #39

Closed phivk closed 5 years ago

phivk commented 5 years ago

I'm trying to use this plugin in Nuxt.js. So far I did (based on the example code):

  1. npm install --save idle-vue
  2. created /plugins/idle-vue.js with the following content:
    
    import Vue from 'vue'
    import IdleVue from 'idle-vue'

const eventsHub = new Vue()

Vue.use(IdleVue, { eventEmitter: eventsHub, idleTime: 10000 })

3. imported the plugin in `/nuxt.config.js`:

plugins: [ { src: '@/plugins/idle-vue.js'} ],

4. added hooks to my Nuxt page Vue instance:

onIdle() { console.log('ZZZ'); }, onActive() { console.log('Hello'); },



This causes Nuxt to report reference error: "window is not defined" 
![Screenshot 2019-05-17 at 12 33 53](https://user-images.githubusercontent.com/902958/57922568-50f75e00-78a0-11e9-94ff-906d375c3d20.png)
voltane commented 5 years ago

According to documentation, for Nuxt.js <2.4 change plugins in nuxt.config.js as follow:

plugins: [
   { src: '@/plugins/idle-vue.js', ssr: false}
 ],

For Nuxt 2.4< use this:

plugins: [
   { src: '@/plugins/idle-vue.js', mode: 'client'}
 ],
phivk commented 5 years ago

thanks for pointing me in the right direction, this works 👍