soixantecircuits/idle-vue

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

Closed this issue · 2 comments

phivk commented

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
})
  1. imported the plugin in /nuxt.config.js:
plugins: [
    { src: '@/plugins/idle-vue.js'}
  ],
  1. 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

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

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