vue-persistent-storage-manager
TypeScript icon, indicating that this package has built-in type declarations

3.0.10 • Public • Published

vue-persistent-storage-manager

CI NPM Coverage

npm peer dependency version MIT npm bundle size

Vue plugin that wraps the StorageManager API and provides the state of the persistent-storage permission alongside a storage estimate.

Features

  • 🔧 Persistent storage: Request and monitor the persistent-storage permission.
  • 💽 Storage estimate: Get storage quota and usage estimates.
  • 🔁 Reactive: Provides observable state using Vue's reactivity
  • ✔️ SSR: Supports server-side-rendering by validating the availability of the StorageManager API.

Installation

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

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

Usage

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

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

Options are not required. In this case, watchStorage will default to false.

Note: If watchStorage is set to true, the functions localStorage.setItem and localStorage.removeItem are replaced by functions that update the StorageEstimate. The original functions will still be called and are available as localStorage.originalSetItem and localStorage.originalRemoveItem

<template>
  <div>
    <button
      :disabled="!$storageManager.isAvailable || $storageManager.isPersistent"
      @click="$storageManager.requestPersistentStorage()"
    >
      {{
        $storageManager.isPersistent
          ? 'Persistence granted'
          : 'Request persistence'
      }}
    </button>
    <p>{{ (100 * $storageEstimate.usage) / $storageEstimate.quota }}%</p>
    <p>{{ $storageEstimate.usage / 1000000 }}MB</p>
  </div>
</template>

Nuxt

  1. Create the file plugins/persistentStorageManager.ts with the following content.
import Vue from 'vue'
import { VuePersistentStorageManager } from 'vue-persistent-storage-manager'

export default () => {
  Vue.use(VuePersistentStorageManager, { watchStorage: true })
}
  1. Update the plugins array 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

Package Sidebar

Install

npm i vue-persistent-storage-manager

Weekly Downloads

17

Version

3.0.10

License

MIT

Unpacked Size

11.2 kB

Total Files

5

Last publish

Collaborators

  • yeger