V-idle is a Vue.js plugin to detect idle/non-active users.
Using NPM:
npm install v-idle --save
import Vue from 'vue'
import Vidle from 'v-idle'
Vue.use(Vidle)
Same for nuxt.js:
Create vidle.js in plugins directory:
import Vue from 'vue'
import Vidle from 'v-idle'
Vue.use(Vidle)
Then in nuxt.config.js:
module.exports = {
plugins: [
{
src: '~/plugins/vidle.js'
}
]
}
Inside template use v-idle component:
<v-idle />
It will show timer counting down from 05:00 by default.
Type: Function
Default: none
Executes when the timer reaches 00:00
<v-idle @idle="onidle" />
Type: Function
Default: none
Executes when the timer reaches time in seconds before 00:00
<v-idle
@remind="onremind"
:reminders="[5, 10, 20, 60]" />
Type: Array
Default: empty array
Array with seconds. Each value will execute @remind
Type: Boolean
Default: false
If set to true, timer will start execution again after 00:00
<v-idle :loop="true" />
Type: Array
Default: [‘mousemove’, ‘keypress’]
Each event will break countdown.
<v-idle :events="['mousemove']" />
Type: Number
Default: 0
How many second to wait before starting countdown.
<v-idle :wait="100" />
Type: Number
Default: 60 * 5
Should be in seconds, default value is 60 * 5 seconds, so 5 minutes.
<v-idle :duration="360" />
Create a timer for 300 seconds (5 minutes) with loop, remind 10 and 15 second before 00:00 with function onremind(), wait 5 seconds before showing user the timer, execute function onidle() when the timer reaches 00:00.
<v-idle
@idle="onidle"
@remind="onremind"
:loop="true"
:reminders="[10, 15]"
:wait="5"
:duration="300" />
methods: {
onidle() {
alert('You have been logged out');
},
onremind(time) {
// alert seconds remaining to 00:00
alert(time);
}
}
To run tests type:
npm run test
To run particular test type:
npm run test -- -t "test_name"
Author: malekim
Source Code: https://github.com/malekim/v-idle
#vuejs #vue #javascript