idle-vue
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.
🌍 Installation
npm install --save idle-vue
👋 Usage
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:
const options = ...Vue
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
Hooks
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.
main.js
Example - const eventsHub =Vueconst vm =el: '#app'{returnmessageStr: 'Hello'}{thismessageStr = 'ZZZ'}{thismessageStr = 'Hello'}
index.html
Example - {{ messageStr }}
isAppIdle
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.
main.js
Example - const store =// ...Vueconst vm =el: '#app'storecomputed:{return thisisAppIdle ? 'ZZZ' : 'Hello'}
index.html
Example - {{ messageStr }}
IdleView
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.
main.js
Example - const eventsHub =const store =// ...Vueconst vm =el: '#app'store// ...
index.html
Example - Hello world!...
Options
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
.
❤️ Contribute
Thanks for helping us!
Please follow the following standards when submitting a pull request: