mt-idle-timer

MtIdleTimer is a Vue.js plugin to detect idle/non-active users, which supports both Vue2 as well as Vue3 version.

Installation

The plugin can be installed by npm or yarn.

NPM

npm install mt-idle-timer --save

Yarn

yarn add mt-idle-timer

Basic usage

Vue.js

import Vue from 'vue'
import MtIdleTimer from 'mt-idle-timer'

Vue.use(MtIdleTimer)

Component

Inside template use mt-idle-timer component:

<mt-idle-timer />

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

Options

@onidle

Type: Function

Default: none

Executes when the timer reaches 00:00.

<mt-idle-timer @onidle="onidle" />

@onactive

Type: Function

Default: none

Executes when the timer reaches 00:00 and any events is occured.

<mt-idle-timer @onactive="onactive" />

@onremind

Type: Function

Default: none

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

<mt-idle-timer
  @onremind="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.

<mt-idle-timer :loop="true" />

events

Type: Array

Default: ['mousemove', 'keypress']

Each event will break countdown.

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

wait

Type: Number

Default: 0

How many second to wait before starting countdown.

<mt-idle-timer :wait="100" />

show

Type: Boolean

Default: true

If set to true, shows timer else hides timer.

<mt-idle-timer :show="true" />

duration

Type: Number

Default: 60 * 5

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

<mt-idle-timer :duration="300" />

Example

Create a timer for 300 seconds (5 minutes) with loop, show timer as show value set to true, 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 and function onactive() when the timer reaches 00:00 and if any event is occured.

<mt-idle-timer
  @onidle="onidle"
  @onremind="onremind"
  @onactive="onactive"
  :loop="true"
  :reminders="[10, 15]"
  :wait="5"
  :show="true"
  :duration="300" />

  methods: {
    onidle() {
      alert('You have been logged out');
    },
    onremind(time) {
      // alert seconds remaining to 00:00
      alert(time);
    }
    active(){
      console.log('active')
    }
  }

codesandbox link

https://codesandbox.io/s/eloquent-chaum-l51pks?file=/src/

Demo Video

You can check video of sample example here https://www.awesomescreenshot.com/video/9040869?key=e4d3129e956333738136cd0497c2f68c which will show login page. Once Logged in it will show duration timer of 10 sec. If user is inactive for more than 10 sec, user will be logged out automatically.