You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
In the root of your project, import the `idle-vue` plug-in, and add it to the Vue global with the following syntax:
16
+
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:
17
17
18
-
Vue.use(IdleVue, options)
18
+
```js
19
+
importVuefrom'vue'
20
+
importIdleVuefrom'idle-vue'
21
+
22
+
constoptions= { ... }
23
+
24
+
Vue.use(IdleVue, options)
25
+
```
26
+
27
+
`Vue.use` is a Vue method that installs the given plugin (here, IdleVue), and passes it the given options.
28
+
29
+
The above code does three things:
30
+
31
+
* Add two hooks `onIdle` and `onActive` to all Vue objects
32
+
33
+
* Add a computed value `isAppIdle` to all Vue objects
34
+
35
+
* Create an `idle-view` component in every Vue object
19
36
20
37
### Hooks
21
38
22
-
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.
39
+
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.
23
40
24
-
These hooks will not be called if the `options` object has no `eventEmitter` field.
41
+
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.
25
42
26
-
#### Example - Js
43
+
#### Example - `main.js`
27
44
28
-
import IdleVue from 'idle-vue'
45
+
```js
46
+
importVuefrom'vue'
47
+
importIdleVuefrom'idle-vue'
29
48
30
-
const eventsHub = new Vue()
49
+
consteventsHub=newVue()
31
50
32
-
Vue.use(IdleVue, { eventEmitter: eventsHub })
51
+
Vue.use(IdleVue, {
52
+
eventEmitter: eventsHub,
53
+
idleTime:10000
54
+
})
33
55
34
-
const vm = new Vue({
35
-
el: '#app',
36
-
data: {
37
-
messageStr: "Hello"
38
-
}
39
-
isIdle() {
40
-
this.messageStr = "ZZZ"
41
-
}
42
-
isActive() {
43
-
this.messageStr = "Hello"
44
-
}
45
-
})
56
+
constvm=newVue({
57
+
el:'#app',
58
+
data: {
59
+
messageStr:"Hello"
60
+
},
61
+
onIdle() {
62
+
this.messageStr="ZZZ"
63
+
},
64
+
onActive() {
65
+
this.messageStr="Hello"
66
+
}
67
+
})
68
+
```
46
69
47
-
#### Example - Html
70
+
#### Example - `index.html`
48
71
49
-
<div id=app>
50
-
<p>
51
-
{{ messageStr }}
52
-
</p>
53
-
</div>
72
+
```html
73
+
<divid=app>
74
+
<p>
75
+
{{ messageStr }}
76
+
</p>
77
+
</div>
78
+
```
54
79
55
-
### Computed
80
+
### `isAppIdle`
56
81
57
82
The plug-in adds a computed value `isAppIdle` to every Vue object.
58
83
59
-
This value will always be `undefined` if the `options` object has no `store` field.
84
+
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.
85
+
86
+
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.
60
87
61
-
#### Example - Js
88
+
#### Example - `main.js`
62
89
63
-
import IdleVue from 'idle-vue'
90
+
```js
91
+
importVuefrom'vue'
92
+
importIdleVuefrom'idle-vue'
93
+
importVuexfrom'vuex'
64
94
65
-
const store = new Vuex.Store({
66
-
// ...
67
-
})
95
+
conststore=newVuex.Store({
96
+
// ...
97
+
})
68
98
69
-
Vue.use(IdleVue, { store })
99
+
Vue.use(IdleVue, { store })
70
100
71
-
const vm = new Vue({
72
-
el: '#app',
73
-
store,
74
-
computed: {
75
-
messageStr() {
76
-
return this.isAppIdle ? "ZZZ" : "Hello"
77
-
}
78
-
}
79
-
})
101
+
constvm=newVue({
102
+
el:'#app',
103
+
store,
104
+
computed: {
105
+
messageStr() {
106
+
returnthis.isAppIdle?"ZZZ":"Hello"
107
+
}
108
+
}
109
+
})
110
+
```
80
111
81
-
#### Example - Html
112
+
#### Example - `index.html`
82
113
83
-
<div id=app>
84
-
<p>
85
-
{{ messageStr }}
86
-
</p>
87
-
</div>
114
+
```html
115
+
<divid=app>
116
+
<p>
117
+
{{ messageStr }}
118
+
</p>
119
+
</div>
120
+
```
88
121
89
122
### IdleView
90
123
91
124
The plug-in also adds a component named `IdleView` (or `idle-view`) to Vue.
92
125
126
+
`idle-view` is automatically available in every Vue component once `Vue.use(IdleVue, ...)` is called; it can be used without using the `components` parameter.
127
+
93
128
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`.
94
129
95
-
#### Example - Js
130
+
This component will *not* be added if the `options` object has no `store` field.
131
+
132
+
#### Example - `main.js`
96
133
97
-
import IdleVue from 'idle-vue'
134
+
```js
135
+
importIdleVuefrom'idle-vue'
136
+
importVuexfrom'vuex'
98
137
99
-
const eventsHub = new Vue()
100
-
const store = new Vuex.Store({
101
-
// ...
102
-
})
138
+
consteventsHub=newVue()
139
+
conststore=newVuex.Store({
140
+
// ...
141
+
})
103
142
104
-
Vue.use(IdleVue, { eventEmitter: eventsHub, store })
143
+
Vue.use(IdleVue, { eventEmitter: eventsHub, store })
105
144
106
-
const vm = new Vue({
107
-
el: '#app',
108
-
store,
109
-
// ...
110
-
})
145
+
constvm=newVue({
146
+
el:'#app',
147
+
store,
148
+
// ...
149
+
})
150
+
```
111
151
112
-
#### Example - Html
152
+
#### Example - `index.html`
113
153
114
-
<div id=app>
115
-
<p>
116
-
Hello world!
117
-
...
118
-
</p>
119
-
<idle-view />
120
-
</div>
154
+
```html
155
+
<divid=app>
156
+
<p>
157
+
Hello world!
158
+
...
159
+
</p>
160
+
<idle-view />
161
+
</div>
162
+
```
121
163
122
164
### Options
123
165
124
166
`idle-vue` accepts the following options when loaded; all of them are facultative, except `store` or `eventEmitter`; they cannot be both omitted:
125
167
126
-
*__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`.
168
+
*__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.
127
169
128
170
*__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)`.
129
171
130
-
*__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`.
172
+
*__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).
131
173
132
-
*__events__: Events that "break" idleness. Default: `['mousemove', 'keydown', 'mousedown', 'touchstart']`
*__keepTracking__: Whether you want to track more than once. Default: `true`.
176
+
*__keepTracking__: Whether you want to track more than once. Default value: `true`.
135
177
136
-
*__startAtIdle__: Start in idle state. Default: `true`.
178
+
*__startAtIdle__: Start in idle state. Default value: `true`.
137
179
138
-
*__moduleName__: The name of the `vuex` module (if `store` is defined), and the prefix of the emitted events (if `eventEmitter` is defined). Default: `idleVue`.
180
+
*__moduleName__: The name of the `vuex` module (if `store` is defined), and the prefix of the emitted events (if `eventEmitter` is defined). Default value: `idleVue`.
0 commit comments