vue-local-storage-reactivity
v1.0.3
Published
A Vue library that makes localStorage reactive
Downloads
7
Maintainers
Readme
vue-local-storage-reactivity
A Vue.js library that provides a reactive interface to the localStorage
object.
Installation
You can install the vue-local-storage-reactivity
package using npm:
npm install vue-local-storage-reactivity
Compatibility
The vue-local-storage-reactivity package is compatible with Vue.js 2.6+ and 3.x
Features
Here are some advantages of the 'vue-reactive-local-storage' package:
- Does not require you to state what
localStorage
keys are of interest beforehand - Reacts to
localStorage
changes done on other tabs - Reacts to new keys as they are added to the
localStorage
- Compatible with both Vue.js 2.6 and Vue.js 3.x, so it can be used in a wide range of Vue.js applications
- Tiny package size
- Zero-dependencies
Usage
To use the vue-local-storage-reactivity
package, you need to import and use it as follows:
import reactiveLocalStorage from "vue-local-storage-reactivity";
The reactiveLocalStorage
object provides a reactive interface to the localStorage
object that holds the localStorage
data that can be updates automatically when the storage gets changed on other tabs.
Here's an example of how to use the reactiveLocalStorage
object in a Vue.js component:
<template>
<div>
<p>Count: {{ count }}</p>
<button @click="++count">Increment Count</button>
</div>
</template>
<script>
import reactiveLocalStorage from 'vue-local-storage-reactivity';
export default {
setup() {
return {
count: Vue.toRef(reactiveLocalStorage, 'count')
};
}
};
</script>
License
The vue-local-storage-reactivity
package is open source software licensed under the MIT license.