vue-persistent-storage-manager

vue-persistent-storage-manager

Vue plugin that wraps the StorageManager API and provides reactivity.

Features

• 💽 StorageManager: Wraps the StorageManager API.
• 🔁 Reactive: Provides observable state using Vue's reactivity
• ✔️ SSR: Supports server-side-rendering by validating the availability of the StorageManager API.

Installation

• Install dependency

# yarn
$ yarn add vue-persistent-storage-manager

# npm
$ npm install vue-persistent-storage-manager

• Configure plugin

import Vue from 'vue'
import { VuePersistentStorageManager } from 'vue-persistent-storage-manager'

Vue.use(VuePersistentStorageManager, { watchStorage: true })

Note: If watchStorage is set to true, the functions localStorage.setItem and localStorage.removeItem are replaced by event-emitting functions. These replacements wrap the original functions and enable recalculation of the StorageEstimate.

Nuxt

• Create the file plugins/persistentStorageManager.ts as seen below.

import Vue from 'vue'
import { VuePersistentStorageManager } from 'vue-persistent-storage-manager'

export default () => {
  Vue.use(VuePersistentStorageManager, { watchStorage: true })
}

• Update the plugins field in nuxt.config.js:

export default {
  plugins: [
    { src: '~/plugins/persistentStorageManager.ts' },
  ],
}

Development

# install dependencies
$ yarn install

# build for production
$ yarn build

# lint project files
$ yarn lint

# run tests
$ yarn test

License

MIT - Copyright © Jan Müller