Normal Programming Mistake

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

    2.0.76 • Public • Published

    vue-persistent-storage-manager

    CI NPM Coverage LGTM Grade

    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

    Install

    npm i vue-persistent-storage-manager

    DownloadsWeekly Downloads

    263

    Version

    2.0.76

    License

    MIT

    Unpacked Size

    43.1 kB

    Total Files

    12

    Last publish

    Collaborators

    • yeger