Detect Idle Users In Vue - v-idle

Install & Download:

# Yarn
$ yarn add v-idle
# NPM
$ npm i v-idle

Description:

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