idle-vue

import Vue from 'vue'; import IdleVue from 'idle-vue'; // Create a new Vue instance to act as the event hub for idle-vue const eventsHub = new new Vue(); // Install the idle-vue plugin with the event hub and an idle time of 10 seconds Vue.use(IdleVue, { eventEmitter: eventsHub, idleTime: 10000 // 10 seconds (in milliseconds) }); // Create the main Vue application instance const vm = new Vue({ el: '#app', data () { return { messageStr: 'Application is active.' }; }, // Define the onIdle hook to be called when the app goes idle onIdle() { this.messageStr = 'Application is idle. ZZZ...'; console.log('User is idle!'); }, // Define the onActive hook to be called when the app becomes active again onActive() { this.messageStr = 'Application is active again!'; console.log('User is active!'); }, template: ` <div style="font-family: sans-serif; text-align: center; margin-top: 50px;"> <h1>idle-vue Example</h1> <p>{{ messageStr }}</p> <p>Move your mouse or type to stay active. It will go idle after 10 seconds of inactivity.</p> </div> ` });