khalo-sa/v-idle-3

A Vue.js 3 plugin to detect idle/non-active users (based on v-idle). Original documentation:

v-idle-3

V-idle-3 is a Vue.js plugin to detect idle/non-active users, with a Vue.js 3 support.

Installation

The plugin can be installed by npm or yarn. Alternatively it can be used through jsdelivr CDN.

NPM

npm install v-idle-3 --save

Yarn

yarn add v-idle-3

Jsdelivr CDN

Latest version of the plugin is available here: https://cdn.jsdelivr.net/npm/v-idle-3@latest/build/vidle.min.js

Basic usage

Vue.js

import { createApp } from "vue";
import Vidle from 'v-idle-3'

const myApp = createApp(App);
myApp.use(Vidle);

myApp.mount("#app");

Same for nuxt.js:

Nuxt.js

Create vidle.js in plugins directory:

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:

module.exports = {
  plugins: [
    {
      src: '~/plugins/vidle.js'
    }
  ]
}

Component

Inside template use v-idle component:

<v-idle />

It will show timer counting down from 05:00 by default.

Options

@idle

Type: Function

Default: none

Executes when the timer reaches 00:00

<v-idle @idle="onidle" />

@remind

Type: Function

Default: none

Executes when the timer reaches time in seconds before 00:00

<v-idle
  @remind="onremind"
  :reminders="[5, 10, 20, 60]" />

reminders

Type: Array

Default: empty array

Array with seconds. Each value will execute @remind

loop

Type: Boolean

Default: false

If set to true, timer will start execution again after 00:00

<v-idle :loop="true" />

events

Type: Array

Default: ['mousemove', 'keypress']

Each event will break countdown.

<v-idle :events="['mousemove']" />

wait

Type: Number

Default: 0

How many second to wait before starting countdown.

<v-idle :wait="100" />

duration

Type: Number

Default: 60 * 5

Should be in seconds, default value is 60 * 5 seconds, so 5 minutes.

<v-idle :duration="300" />

Example

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);
    }
  }

Tests

To run tests type:

npm run test

Special thanks

To the original repository made by malekim.

License

v-idle-3 uses the MIT License (MIT). Please see the license file for more information.