idle-vue is a Vue.js plug-in, that detects when the user hasn't interacted with your app for a while. idle-vue is meant to be used with Vue, Vuex and either Webpack or Browserify.

idle-vue is based on idle-js.

npm install --save idle-vue 

In the root of your project, import the idle-vue plug-in, and add it to the Vue global with the following syntax:

Vue.use(IdleVue, options) 

The plug-in adds two hooks to Vue: onIdle and onActive; those methods may be defined in any Vue object (components included), and will be called by the plug-in when the window respectively starts and stops idling.

These hooks will not be called if the options object has no eventEmitter field.

import IdleVue from 'idle-vue' const eventsHub = new Vue() Vue.use(IdleVue, { eventEmitter: eventsHub }) const vm = new Vue({ el: '#app', data: { messageStr: "Hello" } isIdle() { this.messageStr = "ZZZ" } isActive() { this.messageStr = "Hello" } }) 

<div id=app> <p> {{ messageStr }} </p> </div> 

The plug-in adds a computed value isAppIdle to every Vue object.

This value will always be undefined if the options object has no store field.

import IdleVue from 'idle-vue' const store = new Vuex.Store({ // ... }) Vue.use(IdleVue, { store }) const vm = new Vue({ el: '#app', store, computed: { messageStr() { return this.isAppIdle ? "ZZZ" : "Hello" } } }) 

<div id=app> <p> {{ messageStr }} </p> </div> 

The plug-in also adds a component named IdleView (or idle-view) to Vue.

This component is a default idle overlay with a small "touch the screen" sprite; it has no props and no slots. You may create your own idle overlay by exploiting isAppIdle.

import IdleVue from 'idle-vue' const eventsHub = new Vue() const store = new Vuex.Store({ // ... }) Vue.use(IdleVue, { eventEmitter: eventsHub, store }) const vm = new Vue({ el: '#app', store, // ... }) 

<div id=app> <p> Hello world! ... </p> <idle-view /> </div> 

idle-vue accepts the following options when loaded; all of them are facultative, except store or eventEmitter; they cannot be both omitted:

• eventEmitter: The Vue instance through which the idle-vue plugin is to send events. The plugin will send idleVue_onIdle and idleVue_onActive events to this instance; all Vue objects created after the plugin is loaded will run their onIdle and onActive hooks when idleVue_onIdle and idleVue_onActive events are sent. Default: undefined.

• store: The Vuex instance which stores the state of the app (idle or active); this store has a state idleVue.isIdle and a mutation idleVue/IDLE_CHANGED(isIdle).

• idleTime: The time (in ms) without input before the program is considered idle. For instance, with idleTime=60000, the module will emit idle events after 60 seconds of inactivity. Default: 60000.

• events: Events that "break" idleness. Default: ['mousemove', 'keydown', 'mousedown', 'touchstart']

• keepTracking: Whether you want to track more than once. Default: true.

• startAtIdle: Start in idle state. Default: true.

• moduleName: The name of the vuex module (if store is defined), and the prefix of the emitted events (if eventEmitter is defined). Default: idleVue.

Thanks for helping us!

Please follow the following standards when submitting a pull request:

• JavaScript standard style
• This git branching model