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
At the root of your project, just before creating your Vue application, import the idle-vue plug-in, and add it to the Vue global with the following code:
import Vue from 'vue'
import IdleVue from 'idle-vue'
const options = { ... }
Vue.use(IdleVue, options)Vue.use is a Vue method that installs the given plugin (here, IdleVue), and passes it the given options.
The above code does two things:
-
Add two hooks
onIdleandonActiveto all Vue objects -
Add a computed value
isAppIdleto all Vue objects
The plug-in adds two hooks to Vue: onIdle and onActive; those functions 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 are not methods; they should be added directly at the Root of your component. These hooks will not be called if the options object has no eventEmitter field.
import Vue from 'vue'
import IdleVue from 'idle-vue'
const eventsHub = new Vue()
Vue.use(IdleVue, {
eventEmitter: eventsHub,
idleTime: 10000
})
const vm = new Vue({
el: '#app',
data () {
return {
messageStr: 'Hello'
}
},
onIdle() {
this.messageStr = 'ZZZ'
},
onActive() {
this.messageStr = 'Hello'
}
})<div id=app>
<p>
{{ messageStr }}
</p>
</div>The plug-in adds a computed value isAppIdle to every Vue object.
It's a shorthand for the current value of store.state.idleVue.isIdle; this value will always be undefined if the options object has no store field.
Note that using isAppIdle or using the hooks onIdle and onActive are both different, valid ways of doing the same thing: detecting when your app is idle. You can use either or both of them depending on your needs.
import Vue from 'vue'
import IdleVue from 'idle-vue'
import Vuex from 'vuex'
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 package comes with an example component named IdleView (or idle-view).
idle-view is not automatically included with the plugin. It can be imported as a global component or a dependency within your own component, however it serves best as a working example from which to base your own implementation.
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'
import IdleVueComponent from 'idle-vue/src/components/Idle.vue'
import Vuex from 'vuex'
const eventsHub = new Vue()
const store = new Vuex.Store({
// ...
})
Vue.use(IdleVue, { eventEmitter: eventsHub, store })
Vue.component('idle-view', IdleVueComponent) // Required only to use idle-view component
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-vueplugin is to send events. The plugin will sendidleVue_onIdleandidleVue_onActiveevents to this instance; all Vue objects created after the plugin is loaded will run theironIdleandonActivehooks whenidleVue_onIdleandidleVue_onActiveevents are sent. -
store: The Vuex instance which stores the state of the app (idle or active); this store has a state
idleVue.isIdleand a mutationidleVue/IDLE_CHANGED(isIdle). -
idleTime: The time (in ms) without input before the program is considered idle. For instance, with
idleTime: 40000, the module will emit idle events after 40 seconds of inactivity. Default value:60000(one minute). -
events: Events that "break" idleness. Default value:
['mousemove', 'keydown', 'mousedown', 'touchstart'] -
keepTracking: Whether you want to track more than once. Default value:
true. -
startAtIdle: Start in idle state. Default value:
true. -
moduleName: The name of the
vuexmodule (ifstoreis defined), and the prefix of the emitted events (ifeventEmitteris defined). Default value:idleVue.
Thanks for helping us!
Please follow the following standards when submitting a pull request:
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent