{"id":11075,"library":"idle-vue","title":"Vue User Inactivity Detection","description":"idle-vue is a Vue.js plugin designed to detect user inactivity within a Vue 2 application. It leverages the underlying `idle-js` library to provide a reactive and integrated solution for monitoring when a user has not interacted with the application for a specified duration. The package is currently at version 2.0.5 and, as a Vue 2-specific plugin, its release cadence is likely stable, focused on maintenance rather than frequent new features, aligning with the lifecycle of Vue 2 itself. It offers three primary mechanisms for handling idle states: `onIdle` and `onActive` lifecycle hooks accessible in any Vue component, a computed property `isAppIdle` for reactive state management, and an optional `IdleView` component for a default idle overlay. A key differentiator is its flexible integration, allowing users to either provide an `eventEmitter` (a Vue instance) for hook-based responses or a Vuex `store` for state-driven reactivity, providing developers with robust options for building responsive user experiences around inactivity detection without boilerplate DOM event handling.","status":"maintenance","version":"2.0.5","language":"javascript","source_language":"en","source_url":"https://github.com/soixantecircuits/idle-vue","tags":["javascript"],"install":[{"cmd":"npm install idle-vue","lang":"bash","label":"npm"},{"cmd":"yarn add idle-vue","lang":"bash","label":"yarn"},{"cmd":"pnpm add idle-vue","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core dependency as idle-vue is a Vue.js plugin, requiring a global Vue instance.","package":"vue","optional":false},{"reason":"Provides the underlying logic for user idle detection.","package":"idle-js","optional":false},{"reason":"Optional dependency for integrating idle state with a Vuex store, enabling the 'isAppIdle' computed property and 'IdleView' component.","package":"vuex","optional":true}],"imports":[{"note":"CommonJS require syntax is typically not used in modern Vue (ESM-based) projects.","wrong":"const IdleVue = require('idle-vue')","symbol":"IdleVue","correct":"import IdleVue from 'idle-vue'"},{"note":"The global Vue instance is required to install the plugin via `Vue.use()`.","wrong":"const Vue = require('vue')","symbol":"Vue","correct":"import Vue from 'vue'"},{"note":"idle-vue is a Vue plugin and must be installed globally with `Vue.use()` before creating the root Vue instance.","symbol":"Plugin Installation","correct":"Vue.use(IdleVue, options)"}],"quickstart":{"code":"import Vue from 'vue';\nimport IdleVue from 'idle-vue';\n\n// Create a new Vue instance to act as the event hub for idle-vue\nconst eventsHub = new new Vue();\n\n// Install the idle-vue plugin with the event hub and an idle time of 10 seconds\nVue.use(IdleVue, {\n eventEmitter: eventsHub,\n idleTime: 10000 // 10 seconds (in milliseconds)\n});\n\n// Create the main Vue application instance\nconst vm = new Vue({\n el: '#app',\n data () {\n return {\n messageStr: 'Application is active.'\n };\n },\n // Define the onIdle hook to be called when the app goes idle\n onIdle() {\n this.messageStr = 'Application is idle. ZZZ...';\n console.log('User is idle!');\n },\n // Define the onActive hook to be called when the app becomes active again\n onActive() {\n this.messageStr = 'Application is active again!';\n console.log('User is active!');\n },\n template: `\n
\n

idle-vue Example

\n

{{ messageStr }}

\n

Move your mouse or type to stay active. It will go idle after 10 seconds of inactivity.

\n
\n `\n});","lang":"javascript","description":"This quickstart demonstrates how to set up `idle-vue` using an `eventEmitter` to detect user inactivity and respond via `onIdle` and `onActive` hooks, updating the UI accordingly."},"warnings":[{"fix":"For Vue 3 projects, consider alternative libraries or implement idle detection manually using standard browser APIs.","message":"idle-vue is designed for Vue 2 applications and is not compatible with Vue 3 due to fundamental changes in Vue's plugin API and reactivity system.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Ensure that the options object passed to `Vue.use(IdleVue, options)` includes either `eventEmitter: new Vue()` or `store: new Vuex.Store({...})`.","message":"The plugin requires either an `eventEmitter` (a Vue instance) or a Vuex `store` instance in its options. Omitting both will prevent the plugin from functioning correctly.","severity":"gotcha","affected_versions":">=2.0.0"},{"fix":"To use the hooks, pass `eventEmitter: new Vue()` in the plugin options. If using a Vuex store, ensure the store is correctly configured and passed.","message":"The `onIdle` and `onActive` hooks will only be invoked if an `eventEmitter` (a Vue instance) is provided in the plugin options.","severity":"gotcha","affected_versions":">=2.0.0"},{"fix":"To utilize `isAppIdle` or the `IdleView` component, pass `store: new Vuex.Store({...})` in the plugin options and ensure the store is correctly imported and provided to your root Vue instance.","message":"The `isAppIdle` computed property and the `IdleView` component will only be available if a Vuex `store` instance is provided in the plugin options.","severity":"gotcha","affected_versions":">=2.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure `import IdleVue from 'idle-vue'` is present and `Vue.use(IdleVue, ...)` is called with the imported plugin.","cause":"Attempting to install idle-vue without correctly importing or passing the IdleVue plugin itself.","error":"Error: `Vue.use()` requires a plugin be passed as an argument."},{"fix":"Pass a Vuex store instance in the plugin options: `Vue.use(IdleVue, { store })` and ensure the store is provided to your root Vue instance.","cause":"The `idle-vue` plugin was not initialized with a Vuex store, which is required for `isAppIdle` to be available.","error":"TypeError: Cannot read properties of undefined (reading 'isIdle') or 'isAppIdle' is undefined."},{"fix":"Provide an `eventEmitter` in the plugin options: `const eventsHub = new Vue(); Vue.use(IdleVue, { eventEmitter: eventsHub, ... })`.","cause":"The `idle-vue` plugin was not initialized with an `eventEmitter` (a Vue instance) in its options, which is necessary for the hooks to function.","error":"onIdle or onActive hooks are not firing."}],"ecosystem":"npm"}