How to set timer idle in Vue

Jakz Aizzat
Dec 8, 2019 · 4 min read

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

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

This idle-vue have done a great job dealing with listening to inactive event. We can take advantage for vuex, to get the data of status idle in state management.

Basic

Let’s start with basic functionality. So, in your App.vue file add a computed property called IsIdle that return this.$store.state.idleVue.isIdle. It's a state from the idle-vue package. It will return boolean data.

If you’re not defined store in your IdleVue parameter, the value will be undefined.

App.vue

If we didn’t active for 3 seconds, it stated false

If we’re moving cursor or do any activity, it will stated yes

It shows that Idle-Vue plugins work well in our Vue apps.

Lets add some modal

Let’s create a design for modal. In this example, I’m using TailwindCSS. I added this modal element in separate component.

/src/components/ModalIdle.vue

ModalIdle.vue

Cool. Let’s import this modal into our App.vue file and add it into our template. The component will be shown if the isIdle is true.

App.vue

Congratulation. Now we have a modal if the user is idle. Next, we’re going to create a timer in the modal.

Timer in the modal

What we’re going to do is to add a 10 seconds window for user to take an action before we’re going to remove the user session or logout.

First of all lets create a time variable in our ModalIdle.vue file. This variable will be shown in the modal. We will be used in millisecond format. Let's add second in computed property to display the time in second format.

ModalIdle.vue

Then, we need to make the time is ticking in the modal like a timer. For to achieve this kind of approach, we need to use setInterval to modify the time variable. Since, we're using the setInterval, then we need to use clearInterval to kill the the timer.

This is how it should looks like in our component.

ModalIdle.vue

Let me explain what’s going on in the component.

Source Code

App.vue

ModalIdle.vue

Thanks for reading my article. Let me know if you have any idea, what should I write in my next article.


Originally published at https://jakzaizzat.com

Vue.js Developers

Helping web professionals up their skill and knowledge of Vue.js

Jakz Aizzat

Written by

RICH is not how much you have, its about how much you give.

Vue.js Developers

Helping web professionals up their skill and knowledge of Vue.js

More From Medium

More from Vue.js Developers

More from Vue.js Developers

More from Vue.js Developers

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade