How to set timer idle in Vue

Jakz Aizzat
Vue.js Developers
Published in
4 min readDec 8, 2019


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.


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.



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.