How to set timer idle in Vue

Do you need to check for the inactivity of the user in your Vue apps? If the user is inactive in a period of time, then you wanna automatically log out the user or show a timer first. Normally, a system with confidential data likes bank normally implement this kind of feature.

Goals

To have Vue apps that listen for inactivity for 3 seconds and show a modal with a 10-second timer. If there is no action during the 10 seconds session, automatically logout the user.

Requirement

• Vue
• Vuex
• Idle-Vue

Instructions

Assume you have Vue apps running in your local with vex right now. Let’s install the idle-vue package first by running

npm install idle-vue

Then, let’s add our library into main.js file. For now, we will set 3 seconds for idle time. This is for testing purposes. I added store as a parameter in IdleVue because we want to access the state of idle. Thanks to this library.

Main.js