nuxt with idle-view ? about idle-vue

[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!