v-idle is a Vue.js plugin that can be used to detect idle/non-active users by tracking mousemove, keypress, or any custom events in your Vue applications.
How to use it:
1. Import and register the plugin.
import Vue from 'vue' import Vidle from 'v-idle' Vue.use(Vidle);
2. Add the <v-idle /> component to the template.
<v-idle />
3. Display an alert message when the user is idle.
<v-idle @idle="onidle" @remind="onremind" />
methods: { onidle() { alert('You have been logged out'); }, onremind(time) { alert(time); } }
4. All plugin options.
duration: { type: Number, // default 5 minutes default: 60 * 5, }, events: { type: Array as PropType<string[]>, default: (): string[] => ['mousemove', 'keypress'], }, loop: { type: Boolean, default: false, }, reminders: { type: Array as PropType<number[]>, // array of seconds // emit "remind" event on each second default: (): number[] => [], }, wait: { type: Number, default: 0, },
Download Details:
Author: malekim
Live Demo: https://malekim.github.io/v-idle/
Download Link: https://github.com/malekim/v-idle/archive/refs/heads/master.zip
Official Website: https://github.com/malekim/v-idle
Install & Download:
# Yarn
$ yarn add v-idle
# NPM
$ npm i v-idle