luke-hawk / v-idle

A Vue.js plugin to detect idle/non-active users

v-idle

V-idle is a Vue.js plugin to detect idle/non-active users.

Installation

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

NPM

npm install v-idle --save

Yarn

yarn add v-idle

Jsdelivr CDN

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

Basic usage

Vue.js

import Vue from 'vue'
import Vidle from 'v-idle'

Vue.use(Vidle)

Same for nuxt.js:

Nuxt.js

Create vidle.js in plugins directory:

import Vue from 'vue'
import Vidle from 'v-idle'

Vue.use(Vidle)

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 declared in seconds, default value is 60 * 5 seconds, so 5 minutes.

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

hasMultipleTabs

Type: Boolean

Default: false

Sometimes there is a need to have timer synchronized between opened browser tabs. That option provides a functionality to cover it. The value of timer is stored in localStorage. Use it with an id option.

<v-idle :hasMultipleTabs="true" id="v-idle-timer" />

If you use that option inside nuxt.js, wrap v-idle with client-only.

<client-only>
  <v-idle :hasMultipleTabs="true" id="v-idle-timer" />
</client-only>

id

Type: string

Default: 'v-idle'

The localStorage key needed to synchronize v-idle between tabs. There is no need to set it, if hasMultipleTabs option is set to false. It should be unique, especially if there are several v-idle components on the single page.

<v-idle :hasMultipleTabs="true" id="v-idle-timer" />

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

To run particular test type:

npm run test -- -t "test_name"

License

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