{"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,"search_vec":"'2':25,59,127 '3':28,62,129 'across':22,95 'activ':41,94 'api':102 'applic':29,110 'base':16 'broadcastchannel':101 'browser':97 'bug':46 'cadenc':43 'compat':49 'complex':109 'compon':15 'component-bas':14 'configur':84 'consist':104 'current':31 'definit':116 'demi':67,132 'design':17 'detect':19,83 'detector':4 'develop':119 'differenti':51 'elimin':68 'ensur':103 'environ':63 'event':82 'experi':120 'featur':91 'fix':47 'flexibl':80 'focus':44 'idl':2,7,81,105 'improv':118 'inact':20 'includ':52 'indic':39 'instal':75 'javascript':121 'key':50 'librari':112 'mainten':42 'manag':107 'multipl':96 'need':70 'offer':79 'plugin':12,74,133 'recent':37 'remind':85 'seamless':54 'ship':113 'sinc':76 'stabl':32 'state':106 'support':55 'synchron':93 'synckey':90 'tab':98 'time':86 'typescript':115,134 'uniqu':89 'univers':10 'updat':38 'use':99 'user':3,21 'v':6 'v-idl':5 'v1.0.0':77 'v1.0.3':35 'version':33 'via':64 'vue':1,11,24,27,58,61,66,122,126,128,131 'vue-demi':65,130 'vue.use':72 'vue2':124 'vue3':125 'vuej':123","created_at":"2026-04-19T13:42:39.090594+00:00","updated_at":"2026-04-19T13:42:39.090594+00:00","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","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null,"type":"library","homepage":null,"github":"https://github.com/malekim/v-idle","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/v-idle","openapi_spec":null,"status_page":null,"smithery":null,"categories":["web-framework"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-17","next_check":"2026-07-18","install_tag":null}}