Vue plugin that wraps the StorageManager API and provides the state of the persistent-storage permission alongside a storage estimate.
npm install vue-persistent-storage-manager> Vue plugin that wraps the StorageManager API and provides the state of the persistent-storage permission alongside a storage estimate.
- 🔧 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.
``bashyarn
$ yarn add vue-persistent-storage-manager
Usage
`typescript
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`vue
:disabled="!$storageManager.isAvailable || $storageManager.isPersistent"
@click="$storageManager.requestPersistentStorage()"
>
{{ $storageManager.isPersistent ? 'Persistence granted' : 'Request persistence' }}
{{ (100 * $storageEstimate.usage) / $storageEstimate.quota }}%
{{ $storageEstimate.usage / 1000000 }}MB
`$3
1. Create the file
plugins/persistentStorageManager.ts with the following content.`typescript
import Vue from 'vue'
import { VuePersistentStorageManager } from 'vue-persistent-storage-manager'export default () => {
Vue.use(VuePersistentStorageManager, { watchStorage: true })
}
`2. Update the
plugins array in nuxt.config.js.`typescript
export default {
plugins: [{ src: '~/plugins/persistentStorageManager.ts' }],
}
`Development
`bash
install dependencies
$ yarn installbuild for production
$ yarn buildlint project files
$ yarn lintrun tests
$ yarn test
``MIT - Copyright © Jan Müller