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 three things:
-
Add two hooks
onIdle
andonActive
to all Vue objects -
Add a computed value
isAppIdle
to all Vue objects -
Create an
idle-view
component in every Vue object
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 plug-in also adds a component named IdleView
(or idle-view
) to Vue.
idle-view
is automatically available in every Vue component once Vue.use(IdleVue, ...)
is called; it can be used without using the components
parameter.
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
.
This component will not be added if the options
object has no store
field.
import IdleVue from 'idle-vue'
import Vuex from 'vuex'
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 sendidleVue_onIdle
andidleVue_onActive
events to this instance; all Vue objects created after the plugin is loaded will run theironIdle
andonActive
hooks whenidleVue_onIdle
andidleVue_onActive
events are sent. -
store: The Vuex instance which stores the state of the app (idle or active); this store has a state
idleVue.isIdle
and 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
vuex
module (ifstore
is defined), and the prefix of the emitted events (ifeventEmitter
is defined). Default value:idleVue
.
Thanks for helping us!
Please follow the following standards when submitting a pull request: