https://github.com/arikw/vue-local-storage-reactivity

A Vue library that makes localStorage reactive
https://github.com/arikw/vue-local-storage-reactivity

local-storage localstorage nuxt nuxt2 nuxt3 reactive reactivity vue vue2 vue3

Last synced: 6 days ago
JSON representation

A Vue library that makes localStorage reactive

• Host: GitHub
• URL: https://github.com/arikw/vue-local-storage-reactivity
• Owner: arikw
• Created: 2024-01-04T12:39:16.000Z (9 months ago)
• Default Branch: master
• Last Pushed: 2024-01-10T00:56:01.000Z (9 months ago)
• Last Synced: 2024-09-19T13:09:42.564Z (14 days ago)
• Topics: local-storage, localstorage, nuxt, nuxt2, nuxt3, reactive, reactivity, vue, vue2, vue3
• Language: JavaScript
• Homepage: https://www.npmjs.com/package/vue-local-storage-reactivity
• Size: 2.93 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

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:

```javascript

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:

```javascript

  


    
Count: {{ count }}

    Increment Count

  


import reactiveLocalStorage from 'vue-local-storage-reactivity';

export default {

  setup() {

    return {

      count: Vue.toRef(reactiveLocalStorage, 'count')

    };

  }

};

```

## License

The `vue-local-storage-reactivity` package is open source software licensed under the [MIT license](https://opensource.org/licenses/MIT).