{"id":22126154,"url":"https://github.com/soixantecircuits/idle-vue","last_synced_at":"2025-04-05T11:09:07.737Z","repository":{"id":43002507,"uuid":"91345189","full_name":"soixantecircuits/idle-vue","owner":"soixantecircuits","description":"Vue component wrapper for idle-js","archived":false,"fork":false,"pushed_at":"2022-12-07T17:09:58.000Z","size":697,"stargazers_count":126,"open_issues_count":31,"forks_count":41,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-03-29T10:06:19.005Z","etag":null,"topics":["css","javascript","vue"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/soixantecircuits.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-05-15T14:07:19.000Z","updated_at":"2024-12-04T07:51:23.000Z","dependencies_parsed_at":"2023-01-23T18:25:19.828Z","dependency_job_id":null,"html_url":"https://github.com/soixantecircuits/idle-vue","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/soixantecircuits%2Fidle-vue","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/soixantecircuits%2Fidle-vue/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/soixantecircuits%2Fidle-vue/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/soixantecircuits%2Fidle-vue/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/soixantecircuits","download_url":"https://codeload.github.com/soixantecircuits/idle-vue/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247325693,"owners_count":20920714,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","javascript","vue"],"created_at":"2024-12-01T16:51:21.857Z","updated_at":"2025-04-05T11:09:07.720Z","avatar_url":"https://github.com/soixantecircuits.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"idle-vue [![Build Status](https://travis-ci.org/soixantecircuits/idle-vue.svg?branch=master)](https://travis-ci.org/soixantecircuits/idle-vue)\n========\n\n`idle-vue` is a [Vue.js](http://vuejs.org/) plug-in, that detects when the user hasn't interacted with your app for a while. `idle-vue` is meant to be used with Vue, [Vuex](https://github.com/vuejs/vuex) and either [Webpack](https://webpack.js.org/) or [Browserify](http://browserify.org/).\n\n`idle-vue` is based on [idle-js](https://github.com/soixantecircuits/idle-js).\n\n:earth_africa: Installation\n---------------------------\n\n    npm install --save idle-vue\n\n:wave: Usage\n------------\n\nAt the root of your project, just before creating your Vue application, import the `idle-vue` plug-in, and add it to the Vue global with the following code:\n\n``` js\nimport Vue from 'vue'\nimport IdleVue from 'idle-vue'\n\nconst options = { ... }\n\nVue.use(IdleVue, options)\n```\n\n`Vue.use` is a Vue method that installs the given plugin (here, IdleVue), and passes it the given options.\n\nThe above code does two things:\n\n* Add two hooks `onIdle` and `onActive` to all Vue objects\n\n* Add a computed value `isAppIdle` to all Vue objects\n\n### Hooks\n\nThe plug-in adds two hooks to Vue: `onIdle` and `onActive`; those functions may be defined in any Vue object (components included), and will be called by the plug-in when the window respectively starts and stops idling.\n\nThese hooks are not methods; they should be added directly at the Root of your component. These hooks will not be called if the `options` object has no `eventEmitter` field.\n\n#### Example - `main.js`\n\n``` js\nimport Vue from 'vue'\nimport IdleVue from 'idle-vue'\n\nconst eventsHub = new Vue()\n\nVue.use(IdleVue, {\n  eventEmitter: eventsHub,\n  idleTime: 10000\n})\n\nconst vm = new Vue({\n  el: '#app',\n  data () {\n    return {\n      messageStr: 'Hello'\n    }\n  },\n  onIdle() {\n    this.messageStr = 'ZZZ'\n  },\n  onActive() {\n    this.messageStr = 'Hello'\n  }\n})\n```\n\n#### Example - `index.html`\n\n``` html\n\u003cdiv id=app\u003e\n  \u003cp\u003e\n    {{ messageStr }}\n  \u003c/p\u003e\n\u003c/div\u003e\n```\n\n### `isAppIdle`\n\nThe plug-in adds a computed value `isAppIdle` to every Vue object.\n\nIt's a shorthand for the current value of `store.state.idleVue.isIdle`; this value will always be `undefined` if the `options` object has no `store` field.\n\nNote that using `isAppIdle` or using the hooks `onIdle` and `onActive` are both different, valid ways of doing the same thing: detecting when your app is idle. You can use either or both of them depending on your needs.\n\n#### Example - `main.js`\n\n``` js\nimport Vue from 'vue'\nimport IdleVue from 'idle-vue'\nimport Vuex from 'vuex'\n\nconst store = new Vuex.Store({\n  // ...\n})\n\nVue.use(IdleVue, { store })\n\nconst vm = new Vue({\n  el: '#app',\n  store,\n  computed: {\n    messageStr() {\n      return this.isAppIdle ? 'ZZZ' : 'Hello'\n    }\n  }\n})\n```\n\n#### Example - `index.html`\n\n``` html\n\u003cdiv id=app\u003e\n  \u003cp\u003e\n    {{ messageStr }}\n  \u003c/p\u003e\n\u003c/div\u003e\n```\n\n### IdleView\n\nThe package comes with an example component named `IdleView` (or `idle-view`).\n\n`idle-view` is not automatically included with the plugin. It can be imported as a global component or a dependency within your own component, however it serves best as a working example from which to base your own implementation.\n\nThis component is a default idle overlay with a small \"touch the screen\" sprite; it has no props and no slots. You may create your own idle overlay by exploiting `isAppIdle`.\n\n#### Example - `main.js`\n\n``` js\nimport IdleVue from 'idle-vue'\nimport IdleVueComponent from 'idle-vue/src/components/Idle.vue'\nimport Vuex from 'vuex'\n\nconst eventsHub = new Vue()\nconst store = new Vuex.Store({\n  // ...\n})\n\nVue.use(IdleVue, { eventEmitter: eventsHub, store })\nVue.component('idle-view', IdleVueComponent) // Required only to use idle-view component\n\nconst vm = new Vue({\n  el: '#app',\n  store,\n  // ...\n})\n```\n\n#### Example - `index.html`\n\n``` html\n\u003cdiv id=app\u003e\n  \u003cp\u003e\n    Hello world!\n    ...\n  \u003c/p\u003e\n  \u003cidle-view /\u003e\n\u003c/div\u003e\n```\n\n### Options\n\n`idle-vue` accepts the following options when loaded; all of them are facultative, except `store` or `eventEmitter`; they cannot be both omitted:\n\n* __eventEmitter__: The Vue instance through which the `idle-vue` plugin is to send events. The plugin will send `idleVue_onIdle` and `idleVue_onActive` events to this instance; all Vue objects created after the plugin is loaded will run their `onIdle` and `onActive` hooks when `idleVue_onIdle` and `idleVue_onActive` events are sent.\n\n* __store__: The Vuex instance which stores the state of the app (idle or active); this store has a state `idleVue.isIdle` and a mutation `idleVue/IDLE_CHANGED(isIdle)`.\n\n* __idleTime__: The time (in ms) without input before the program is considered idle. For instance, with `idleTime: 40000`, the module will emit idle events after 40 seconds of inactivity. Default value: `60000` (one minute).\n\n* __events__: Events that \"break\" idleness. Default value: `['mousemove', 'keydown', 'mousedown', 'touchstart']`\n\n* __keepTracking__: Whether you want to track more than once. Default value: `true`.\n\n* __startAtIdle__: Start in idle state. Default value: `true`.\n\n* __moduleName__: The name of the `vuex` module (if `store` is defined), and the prefix of the emitted events (if `eventEmitter` is defined). Default value: `idleVue`.\n\n\n:heart: Contribute\n------------------\n\nThanks for helping us!\n\nPlease follow the following standards when submitting a pull request:\n\n* [JavaScript standard style](http://standardjs.com/)\n* [This git branching model](nvie.com/posts/a-successful-git-branching-model/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsoixantecircuits%2Fidle-vue","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsoixantecircuits%2Fidle-vue","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsoixantecircuits%2Fidle-vue/lists"}