A Vue.js plugin to detect idle/non-active users
npm install v-idle-3V-idle-3 is a Vue.js plugin to detect idle/non-active users, with a Vue.js 3 support.
The plugin can be installed by npm or yarn. Alternatively it can be used through jsdelivr CDN.
``bash`
npm install v-idle-3 --save
`bash`
yarn add v-idle-3
Latest version of the plugin is available here:
https://cdn.jsdelivr.net/npm/v-idle-3@latest/build/vidle.min.js
`javascript
import { createApp } from "vue";
import Vidle from 'v-idle-3'
const myApp = createApp(App);
myApp.use(Vidle);
myApp.mount("#app");
`
Same for nuxt.js:
Create vidle.js in plugins directory:
`javascript
import { createApp } from "vue";
import Vidle from 'v-idle-3'
const myApp = createApp(App);
myApp.use(Vidle);
myApp.mount("#app");
`
Then in nuxt.config.js:
`javascript`
module.exports = {
plugins: [
{
src: '~/plugins/vidle.js'
}
]
}
Inside template use v-idle component:
`html`
It will show timer counting down from 05:00 by default.
Type: Function
Default: none
Executes when the timer reaches 00:00
`html`
Type: Function
Default: none
Executes when the timer reaches time in seconds before 00:00
`html`
: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
`html`
Type: Array
Default: ['mousemove', 'keypress']
Each event will break countdown.
`html`
Type: Number
Default: 0
How many second to wait before starting countdown.
`html`
Type: Number
Default: 60 * 5
Should be in seconds, default value is 60 * 5 seconds, so 5 minutes.
`html`
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.
`html`
@remind="onremind"
:loop="true"
:reminders="[10, 15]"
:wait="5"
:duration="300" />
`javascript`
methods: {
onidle() {
alert('You have been logged out');
},
onremind(time) {
// alert seconds remaining to 00:00
alert(time);
}
}
To run tests type:
`bash`
npm run test
v-idle-3` uses the MIT License (MIT). Please see the license file for more information.