Detect Idle Users In Vue – v-idle

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,
},

Preview:

Detect Idle Usert In Vue - v-idle

Changelog:

v1.0.3 (02/29/2024)

  • fix: add build

v1.0.2 (02/25/2024)

  • Update dependencies

v1.0.1 (02/24/2024)

  • Add synchronization between tabs

v1.0.0 (02/23/2024)

  • Extend refresh event
  • Add vue-demi support
  • Update packages

v0.2.4 (02/18/2024)

  • Update refresh event

v0.2.2 (02/14/2024)

  • Add new event

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
Tags:

Add Comment