{"id":21971780,"url":"https://github.com/cristopher1/vue3-reactive-storage","last_synced_at":"2026-04-29T20:09:40.617Z","repository":{"id":234500940,"uuid":"788597990","full_name":"cristopher1/vue3-reactive-storage","owner":"cristopher1","description":"Vue3 plugin to use LocalStorage and SessionStorage with reactivity","archived":false,"fork":false,"pushed_at":"2024-04-19T18:38:38.000Z","size":206,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-28T02:41:57.297Z","etag":null,"topics":["es6","localstorage","plugin","reactive","reactivity","sessionstorage","storage","vue","vue3"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/vue3-reactive-storage","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/cristopher1.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-04-18T18:15:03.000Z","updated_at":"2024-07-07T20:30:02.000Z","dependencies_parsed_at":null,"dependency_job_id":"2f479af9-8bbf-49bc-9a16-5a3d69cc69ac","html_url":"https://github.com/cristopher1/vue3-reactive-storage","commit_stats":null,"previous_names":["cristopher1/vue3-reactive-storage"],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cristopher1%2Fvue3-reactive-storage","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cristopher1%2Fvue3-reactive-storage/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cristopher1%2Fvue3-reactive-storage/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cristopher1%2Fvue3-reactive-storage/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cristopher1","download_url":"https://codeload.github.com/cristopher1/vue3-reactive-storage/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245031519,"owners_count":20549925,"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":["es6","localstorage","plugin","reactive","reactivity","sessionstorage","storage","vue","vue3"],"created_at":"2024-11-29T14:55:50.042Z","updated_at":"2026-04-29T20:09:35.595Z","avatar_url":"https://github.com/cristopher1.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003eWelcome to vue3-reactive-storage 👋\u003c/h1\u003e\n\u003cp\u003e\n  \u003cimg alt=\"Version\" src=\"https://img.shields.io/badge/version-1.0.1-blue.svg?cacheSeconds=2592000\" /\u003e\n  \u003ca href=\"https://github.com/cristopher1/vue3-reactive-storage#readme\" target=\"_blank\"\u003e\n    \u003cimg alt=\"Documentation\" src=\"https://img.shields.io/badge/documentation-yes-brightgreen.svg\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/cristopher1/vue3-reactive-storage/graphs/commit-activity\" target=\"_blank\"\u003e\n    \u003cimg alt=\"Maintenance\" src=\"https://img.shields.io/badge/Maintained%3F-yes-green.svg\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/cristopher1/vue3-reactive-storage/blob/master/LICENSE\" target=\"_blank\"\u003e\n    \u003cimg alt=\"License: MIT\" src=\"https://img.shields.io/github/license/cristopher1/vue3-reactive-storage\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003e Vue3 plugin to use reactivity with object that implements the Storage interface\n\n### 🏠 [Homepage](https://github.com/cristopher1/vue3-reactive-storage)\n\nA Vue3 plugin to use reactivity with object that implements the Storage interface, for example: localStorage, sessionStorage or customer object. Working with one or various app instances. Based on [@cljimenez/vue-localstorage-reactive](https://www.npmjs.com/package/@cljimenez/vue-localstorage-reactive). Include the class ReactiveWebStorageError used by ReactiveWebStorage to throw Errors.\n\n### [Index](#index)\n\n- [Install](#install)\n- [How to use?](#how-to-use?)\n  - [Install the plugin](#install)\n  - [Install options](#install-options)\n  - [About the ReactiveWebStorage methods](#about-reactive-web-storage-methods)\n  - [Use the composition API](#composition-api)\n- [Author](#author)\n- [Contributing](#contributing)\n- [License](#license)\n\n## \u003ca id=\"install\"\u003e\u003c/a\u003e Install\n\n```sh\nnpm install vue3-reactive-storage\n```\n\n## \u003ca id=\"how-to-use?\"\u003e\u003c/a\u003e How to use?\n\n- ### \u003ca id=\"install\"\u003e\u003c/a\u003e Install the plugin.\n\n  **Using an app instance**\n\n  ```js\n  import { createApp, reactive, ref } from 'vue'\n  import createReactiveWebStorageInstaller from 'vue3-reactive-storage'\n\n  import { createApp } from 'vue'\n\n  import App from './App.vue'\n\n  const app = createApp(App)\n\n  app.use(createReactiveWebStorageInstaller(), {\n    webStorage: localStorage,\n    reactiveStorage: ref({}),\n  })\n\n  const appReactiveStorage = app.config.globalProperties.$reactiveWebStorage\n\n  app.provide('storage', appReactiveStorage)\n\n  app.mount('#app')\n  ```\n\n  **Using various app instances**\n\n  ```js\n  import { createApp, reactive, ref } from 'vue'\n  import createReactiveWebStorageInstaller from 'vue3-reactive-storage'\n  import App from './App.vue'\n  import SubApp from './SubApp.vue'\n  import OtherSubApp from './OtherSubApp.vue'\n\n  const app = createApp(App)\n  const subApp = createApp(SubApp)\n  const otherSubApp = createApp(OtherSubApp)\n\n  app.use(createReactiveWebStorageInstaller(), {\n    webStorage: localStorage,\n    reactiveStorage: ref({}),\n  })\n\n  subApp.use(createReactiveWebStorageInstaller(), {\n    prefix: 'new_prefix',\n    webStorage: sessionStorage,\n    reactiveStorage: ref({}),\n  })\n\n  otherSubApp.use(createReactiveWebStorageInstaller(), {\n    prefix: 'some_prefix',\n    webStorage: localStorage,\n    reactiveStorage: reactive({}),\n  })\n\n  const appReactiveStorage = app.config.globalProperties.$reactiveWebStorage\n  const subAppReactiveStorage =\n    subApp.config.globalProperties.$reactiveWebStorage\n  const otherSubAppReactiveStorage =\n    otherSubApp.config.globalProperties.$reactiveWebStorage\n\n  app.provide('storage', appReactiveStorage)\n  subApp.provide('storage', subAppReactiveStorage)\n  otherSubApp.provide('storage', otherSubAppReactiveStorage)\n\n  app.mount('#app')\n  subApp.mount('#subapp')\n  otherSubApp.mount('#othersubapp')\n  ```\n\n- ### \u003ca id=\"install-options\"\u003e\u003c/a\u003e Install options.\n\n  When you installs this plugin using you can use options:\n\n  ```js\n  app.use(createReactiveWebStorageInstaller(), options)\n  ```\n\n  The options object can contain the following attributes:\n\n  - webStorage: Required value. localStorage, sessionStorage or other object that implements the Storage interface.\n  - reactiveStorage: Required value. ref or reactive object.\n  - prefix: Optional value. Used to segment the Storage object, the prefix is added to key (using '-') in Storage object. Generally used when using multiple app instances. For example:\n\n    ```js\n    import { createApp, reactive, ref } from 'vue'\n    import createReactiveWebStorageInstaller from 'vue3-reactive-storage'\n\n    import { createApp } from 'vue'\n\n    import App from './App.vue'\n\n    const app = createApp(App)\n\n    app.use(createReactiveWebStorageInstaller(), {\n      prefix: 'hello_world'\n      webStorage: localStorage,\n      reactiveStorage: ref({}),\n    })\n\n    const appReactiveStorage = app.config.globalProperties.$reactiveWebStorage\n\n    // Adds in Storage object\n    // key: hello_world-my_key\n    // value: data\n    // Adds in reactive object\n    // key: my_key\n    // value: data\n    appReactiveStorage.setItem('my_key', 'data')\n\n    app.provide('storage', appReactiveStorage)\n\n    app.mount('#app')\n    ```\n\n    by default, prefix is ''.\n\n  - loadDataFromWebStorage: Optional value. By default is true. Loads the keys/values in Storage object to reactive object when the load event is fired by window object. Useful when closing and opening the\n    browser window.\n\n- ### \u003ca id=\"about-reactive-web-storage-methods\"\u003e\u003c/a\u003e About the ReactiveWebStorage methods\n\n  The `ReactiveWebStorage` object provides an interface similar to the Storage interface, this methods are:\n\n  - `(getter) length`: Obtains the number of elements saved in reactiveWebStorage.\n  - `(method) key(index)`: Returns the key in nth position into reactiveWebStorage.\n  - `(method) getItem(key)`: Returns the parsed key's value saved into reactiveWebStorage.\n  - `(method) setItem(key, item)`: Saves the pair key/value into reactiveWebStorage.\n  - `(method) removeItem(key)`: Removes the pair key/value from reactiveWebStorage.\n  - `(method) clear()`: Removes all pairs key/value into reactiveWebStorage.\n\n  And include others methods:\n\n  - `(getter) reactiveStorageAdapter`: Returns the reactiveStorageAdapter (object that wraps the reactiveStorage using an insterface similar to Storage) object used by reactiveWebStorage instance.\n  - `(getter) reactiveStorage`: Returns the reactiveStorage object used by reactiveWebStorage instance.\n\n- ### \u003ca id=\"composition-api\"\u003e\u003c/a\u003e Use the composition API:\n\n  You can use the provide / inject functions.\n\n  ```js\n  import { createApp, reactive, ref } from 'vue'\n  import createReactiveWebStorageInstaller from 'vue3-reactive-storage'\n\n  import { createApp } from 'vue'\n\n  import App from './App.vue'\n\n  const app = createApp(App)\n\n  app.use(createReactiveWebStorageInstaller(), {\n    webStorage: localStorage,\n    reactiveStorage: ref({}),\n  })\n\n  const appReactiveStorage = app.config.globalProperties.$reactiveWebStorage\n\n  app.provide('storage', appReactiveStorage)\n\n  app.mount('#app')\n  ```\n\n  ```vue\n  // you can use the inject function to access to the reactiveWebStorage.\n  \u003ctemplate\u003e\n    \u003ch2\u003e{{ getUsername }}\u003c/h2\u003e\n    \u003cbutton @click=\"storage.setItem('username', 'an username')\"\u003e\n      Add username\n    \u003c/button\u003e\n    \u003cbutton @click=\"storage.removeItem('username')\"\u003eDelete username\u003c/button\u003e\n  \u003c/template\u003e\n\n  \u003cscript setup\u003e\n  import { inject, computed } from 'vue'\n\n  const storage = inject('storage')\n\n  const getUsername = computed(() =\u003e {\n    return storage.getItem('username')\n  })\n  \u003c/script\u003e\n  ```\n\n## \u003ca id=\"author\"\u003e\u003c/a\u003e Author\n\n👤 **Cristopher Jiménez Meza**\n\n- Github: [@cristopher1](https://github.com/cristopher1)\n\n## \u003ca id=\"contributing\"\u003e\u003c/a\u003e 🤝 Contributing\n\nContributions, issues and feature requests are welcome!\u003cbr /\u003eFeel free to check [issues page](https://github.com/cristopher1/vue3-reactive-storage/issues). You can also take a look at the [contributing guide](https://github.com/cristopher1/vue3-reactive-storage/blob/master/CONTRIBUTING.md).\n\n## Show your support\n\nGive a ⭐️ if this project helped you!\n\n## \u003ca id=\"license\"\u003e\u003c/a\u003e 📝 License\n\nCopyright © 2024 [Cristopher Jiménez Meza](https://github.com/cristopher1).\u003cbr /\u003e\nThis project is [MIT](https://github.com/cristopher1/vue3-reactive-storage/blob/master/LICENSE) licensed.\n\n---\n\n_This README was generated with ❤️ by [readme-md-generator](https://github.com/kefranabg/readme-md-generator)_\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcristopher1%2Fvue3-reactive-storage","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcristopher1%2Fvue3-reactive-storage","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcristopher1%2Fvue3-reactive-storage/lists"}