{"id":12337,"library":"v-idle","title":"Vue Idle User Detector","description":"V-idle is a universal Vue plugin (now component-based) designed to detect inactive users across both Vue 2 and Vue 3 applications. The current stable version is v1.0.3, with recent updates indicating an active maintenance cadence focused on bug fixes and compatibility. Key differentiators include its seamless support for both Vue 2 and Vue 3 environments via `vue-demi`, eliminating the need for `Vue.use()` for plugin installation since v1.0.0. It offers flexible idle event detection, configurable reminder timings, and a unique `syncKey` feature for synchronizing activity across multiple browser tabs using the BroadcastChannel API, ensuring consistent idle state management in complex applications. This library ships with TypeScript definitions for improved developer experience.","status":"active","version":"1.0.3","language":"javascript","source_language":"en","source_url":"https://github.com/malekim/v-idle","tags":["javascript","vue","vuejs","vue2","vue3","vue 2","vue 3","vue-demi","plugin","typescript"],"install":[{"cmd":"npm install v-idle","lang":"bash","label":"npm"},{"cmd":"yarn add v-idle","lang":"bash","label":"yarn"},{"cmd":"pnpm add v-idle","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required for Vue 2.6+ projects to enable Composition API features, which v-idle leverages internally for cross-version compatibility.","package":"@vue/composition-api","optional":false},{"reason":"Peer dependency for core Vue functionality, supporting both Vue 2.x and 3.x.","package":"vue","optional":false}],"imports":[{"note":"As of v1.0.0, Vidle is a default export and used directly as a component. It no longer requires global Vue.use() plugin registration.","wrong":"import { Vidle } from 'v-idle'","symbol":"Vidle","correct":"import Vidle from 'v-idle'"},{"note":"For Vue 2.7 and Vue 3 projects, `defineComponent` should be imported directly from 'vue'.","wrong":"import { defineComponent } from '@vue/composition-api'","symbol":"defineComponent","correct":"import { defineComponent } from 'vue'"},{"note":"For Vue 2.6 projects utilizing the Composition API, `defineComponent` must be imported from '@vue/composition-api'. Ensure `VueCompositionAPI` is globally installed via `Vue.use()`.","wrong":"import { defineComponent } from 'vue'","symbol":"defineComponent","correct":"import { defineComponent } from '@vue/composition-api'"},{"note":"This import is typically used in Vue 2.6+ setups alongside `Vue.use(VueCompositionAPI)` to enable Composition API support, which `v-idle` relies on for its universal compatibility.","symbol":"VueCompositionAPI","correct":"import VueCompositionAPI from '@vue/composition-api'"}],"quickstart":{"code":"<!-- App.vue template example -->\n<template>\n  <div>\n    <h1>v-idle Demo</h1>\n    <p>Idle Count: {{ idleCount }}</p>\n    <p>Refresh Count: {{ refreshCount }}</p>\n    <p>Last Activity: {{ lastActivity || 'None yet' }}</p>\n    <Vidle\n      @idle=\"onIdle\"\n      @refresh=\"onRefresh\"\n      :reminders=\"[5, 10]\"\n      :events=\"['mousemove', 'keypress', 'click']\"\n      :wait=\"30\" \n      syncKey=\"my-app-idle-sync\"\n    />\n    <p>Move mouse, click, or press keys to reset the timer.</p>\n    <p>An idle event will fire after 30 seconds of inactivity, with reminders at 5 and 10 seconds remaining.</p>\n    <p>The `syncKey` prop will synchronize activity across tabs sharing the same key.</p>\n  </div>\n</template>\n\n<script lang=\"typescript\">\nimport { defineComponent, ref } from 'vue';\nimport Vidle from 'v-idle';\n\nexport default defineComponent({\n  components: {\n    Vidle,\n  },\n  setup() {\n    const idleCount = ref(0);\n    const refreshCount = ref(0);\n    const lastActivity = ref('');\n\n    const onIdle = () => {\n      idleCount.value++;\n      console.log('User is idle!');\n    };\n\n    const onRefresh = (event: { type: string; key: string | undefined }) => {\n      refreshCount.value++;\n      lastActivity.value = event.type + (event.key ? ` (${event.key})` : '');\n      console.log('User activity detected:', event.type, event.key);\n    };\n\n    return {\n      idleCount,\n      refreshCount,\n      lastActivity,\n      onIdle,\n      onRefresh,\n    };\n  },\n});\n</script>","lang":"typescript","description":"This example demonstrates basic integration of the `Vidle` component within a Vue 3 setup, showcasing how to handle `@idle` and `@refresh` events, configure `reminders`, `events` to track, and use `syncKey` for cross-tab synchronization. The `wait` prop is set to a short duration for quick testing."},"warnings":[{"fix":"Remove `Vue.use(Vidle)` calls from your application entry point. Update components to import `Vidle` directly (`import Vidle from 'v-idle'`) and ensure it is listed in the `components` option of any Vue component where it is used.","message":"Prior to v1.0.0, `v-idle` was installed as a Vue plugin via `Vue.use(Vidle)`. As of v1.0.0, `v-idle` is no longer a plugin and must be imported directly as a component (`import Vidle from 'v-idle'`) and registered in your component's `components` option.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Ensure `@vue/composition-api` is installed (`npm install @vue/composition-api`) and add `import VueCompositionAPI from '@vue/composition-api'; Vue.use(VueCompositionAPI);` to your application's main JavaScript/TypeScript file.","message":"For Vue 2.6 projects, utilizing the Composition API (and therefore `v-idle`'s cross-version compatibility) requires explicit installation of the `@vue/composition-api` package and registering it with `Vue.use(VueCompositionAPI)` in your main Vue entry file.","severity":"gotcha","affected_versions":"<3.0.0"},{"fix":"For environments lacking native `BroadcastChannel` support (e.g., some older browsers), integrate a polyfill for `BroadcastChannel` to ensure the cross-tab synchronization functions correctly.","message":"The `syncKey` feature, introduced in v1.0.1 for synchronizing the refresh event across browser tabs, relies on the browser's `BroadcastChannel` API. This API might not be supported in older browsers, preventing the synchronization feature from working as expected in those environments.","severity":"gotcha","affected_versions":">=1.0.1"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Remove `Vue.use(Vidle)` calls. `v-idle` is now a component; import it directly (`import Vidle from 'v-idle'`) and register it in your component's `components` option.","cause":"Attempting to install `v-idle` as a plugin using `Vue.use()` after v1.0.0.","error":"TypeError: Vue.use is not a function"},{"fix":"Ensure `Vidle` is imported correctly (`import Vidle from 'v-idle'`) and explicitly registered within the `components` option of the Vue component where it's being used, e.g., `{ components: { Vidle } }`.","cause":"The `Vidle` component has not been correctly registered in the parent Vue component's `components` option, or the import path is incorrect.","error":"[Vue warn]: Failed to resolve component: Vidle"},{"fix":"For Vue 2.6 projects, install `@vue/composition-api` (`npm install @vue/composition-api`) and ensure `Vue.use(VueCompositionAPI)` is called in your application's entry file before mounting your root Vue instance.","cause":"When using `v-idle` in Vue 2.6+ with Composition API, `@vue/composition-api` has not been correctly installed and registered globally via `Vue.use(VueCompositionAPI)`.","error":"TypeError: Cannot read properties of undefined (reading 'use') at <anonymous>:1:5"}],"ecosystem":"npm"}