nuxt with idle-view ?

[lieunttuit]

I try add idle-vue to my Nuxt app. But when I use idle-view to view. it is show error Property or method "isIdle" is not defined on the instance but referenced during render

This my config: plugins/idle-vue.js:

import IdleVue from 'idle-vue'
import Vue from 'vue'
import Vuex from 'vuex'
import IdleVueComponent from 'idle-vue/src/components/Idle.vue'

const store = new Vuex.Store({})

const eventsHub = new Vue()
Vue.component('idle-view', IdleVueComponent)
Vue.use(IdleVue, {
  eventEmitter: eventsHub,
  store,
  idleTime: 10000
})

nuxt.config.js

plugins: [
    {
      src: '~/plugins/firebase.js',
      ssr: false
    },
...
  ],

pages/index.vue

.form-group
  idle-view

I use nuxt ^2.6.2. Please help me. Thank you

[aarontraynor]

Hey! I had the same struggle when I was trying to figure it out so hopefully this will get you up and running!

plugins/idle-vue.js:

import Vue from 'vue';
import Vuex from 'vuex';
import IdleVue from 'idle-vue';

const store = new Vuex.Store({
    state: {
        isIdle: false,
    }
});
const eventsHub = new Vue();

Vue.use(IdleVue, {
    eventEmitter: eventsHub,
    store,
    idleTime: 60000
    startAtIdle: false
  });

nuxt.config.js

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

You can then access isAppIdle through a computed value in your component:

computed: {
    isIdle() {
        return this.$store._vm.isAppIdle;
    },
    ...
}

However, for most cases you should be able to make use of the onIdle() and onActive() hooks provided. If that works for you, you can simplify your idle-vue.js file like so:

import Vue from 'vue';
import IdleVue from 'idle-vue';

const eventsHub = new Vue();

Vue.use(IdleVue, {
    eventEmitter: eventsHub,
    idleTime: 60000
    startAtIdle: false
  });

then in the component you wish to use the idle timer in, you can use the hooks as follows:

async onIdle() {
    this.doSomethingWhenUserIsIdle();
}
async onActive() {
    this.doSomethingWhenUserIsNoLongerIdle();
}

Hope this helps! :)

[lieunttuit]

@aarontraynor Thank you so much, May be i forgot init isIdle for Vuex. I'm using of the onIdle() and onActive() hooks provided. It work fine!