diff --git a/README.md b/README.md
index ab55e07..6b9d67b 100644
--- a/README.md
+++ b/README.md
@@ -1,11 +1,114 @@
idle-vue [](https://travis-ci.org/soixantecircuits/idle-vue)
========
-`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/).
+`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/).
`idle-vue` is based on [idle-js](https://github.com/soixantecircuits/idle-js).
-:earth_africa: Installation
+:earth_africa: Installation for Vue 3
+---------------------------
+
+ npm install --save idle-vue
+ npm install tiny-emitter --save
+
+:wave: Usage Vue 3
+------------
+
+At 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:
+
+``` js
+import { createApp } from 'vue'
+import App from './App.vue'
+import IdleVue from 'idle-vue'
+
+const app = createApp(App)
+const options = { ... }
+app.use(IdleVue, options)
+app.mount('#app')
+```
+
+`app.use` Expects the plugin as the first argument, and optional plugin options as the second argument.
+
+The plugin can either be an object with an `install()` method, or just a function that will be used as the `install()`
+method. The options (second argument of `app.use()`) will be passed along to the plugin's `install()` method.
+
+When app.use() is called on the same plugin multiple times, the plugin will be installed only once.
+
+The above code does two things:
+
+* Add two hooks `onIdle` and `onActive` to all Vue objects
+
+* Add a computed value `isAppIdle` to all Vue objects
+
+### Hooks
+
+The 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.
+
+These 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.
+
+#### Example - `main.js`
+
+``` js
+import { createApp } from "vue";
+import App from "./App.vue";
+import IdleVue from 'idle-vue'
+import emitter from 'tiny-emitter/instance'
+
+const app = createApp(App)
+
+app.use(IdleVue, {
+ eventEmitter: {
+ $on: (...args) => emitter.on(...args),
+ $once: (...args) => emitter.once(...args),
+ $off: (...args) => emitter.off(...args),
+ $emit: (...args) => emitter.emit(...args)
+ },
+ idleTime: 10000
+})
+
+app.mount("#app");
+```
+
+#### Example - `index.html`
+
+``` html
+
+
+
+
+
+
+```
+
+## Demo Vue 3
+
+[](https://codesandbox.io/s/idle-vue3-j9cpug)
+
+:earth_africa: Installation for Vue 2
---------------------------
npm install --save idle-vue
@@ -13,7 +116,8 @@ idle-vue [, and will be called by the plug-in when the window respectively starts and stops idling.
+The 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.
-These 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.
+These 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.
#### Example - `main.js`
@@ -81,9 +187,11 @@ const vm = new Vue({
The plug-in adds a computed value `isAppIdle` to every Vue object.
-It'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.
+It'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.
-Note 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.
+Note 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.
#### Example - `main.js`
@@ -123,9 +231,11 @@ const vm = new Vue({
The package comes with an example component named `IdleView` (or `idle-view`).
-`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.
+`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.
-This 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`.
+This 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`.
#### Example - `main.js`
@@ -163,13 +273,19 @@ const vm = new Vue({
### Options
-`idle-vue` accepts the following options when loaded; all of them are facultative, except `store` or `eventEmitter`; they cannot be both omitted:
+`idle-vue` accepts the following options when loaded; all of them are facultative, except `store` or `eventEmitter`;
+they cannot be both omitted:
-* __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.
+* __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.
-* __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)`.
+* __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)`.
-* __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).
+* __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).
* __events__: Events that "break" idleness. Default value: `['mousemove', 'keydown', 'mousedown', 'touchstart']`
@@ -177,8 +293,8 @@ const vm = new Vue({
* __startAtIdle__: Start in idle state. Default value: `true`.
-* __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`.
-
+* __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`.
:heart: Contribute
------------------
diff --git a/package.json b/package.json
index e9f51aa..74a0243 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "idle-vue",
- "version": "2.0.5",
+ "version": "2.0.6",
"description": "Vue component wrapper for idle-js",
"repository": "https://github.com/soixantecircuits/idle-vue.git",
"author": "Olivier FAURE ",