# vue-persistent-storage-manager

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

Latest version **3.0.21** (published 2026-01-24) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install vue-persistent-storage-manager
pnpm add vue-persistent-storage-manager
yarn add vue-persistent-storage-manager
bun add vue-persistent-storage-manager
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 3.0.21 |
| Published | 2026-01-24 |
| First published | 2021-07-06 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM |
| Dependencies | 0 |
| Unpacked size | 16.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 383 |
| Author | Jan Müller |
| Maintainers | yeger |
| Keywords | persistent-storage, plugin, storagemanager, vue |

## Links

- npm: https://www.npmjs.com/package/vue-persistent-storage-manager
- Repository: https://github.com/DerYeger/yeger
- Homepage: https://github.com/DerYeger/yeger/tree/main/packages/vue-persistent-storage-manager
- Issues: https://github.com/DerYeger/yeger/issues
- npm.io page: https://npm.io/package/vue-persistent-storage-manager

## Alternatives

- [localforage](https://npm.io/package/localforage.md) — 6.2M weekly downloads
- [localforage-observable](https://npm.io/package/localforage-observable.md) — 30.8K weekly downloads
- [@y/y](https://npm.io/package/@y/y.md) — 30.1K weekly downloads
- [@metaobjectsdev/render](https://npm.io/package/@metaobjectsdev/render.md) — 3.5K weekly downloads
- [@ledgerhq/coin-algorand](https://npm.io/package/@ledgerhq/coin-algorand.md) — 1.1K weekly downloads

## Recent versions

- 3.0.21 (latest) — 2026-01-24
- 3.0.20 — 2025-11-08
- 3.0.19 — 2025-10-30
- 3.0.18 — 2025-10-29
- 3.0.17 — 2025-07-05
- 3.0.16 — 2025-06-11
- 3.0.15 — 2025-06-05
- 3.0.14 — 2025-02-01
- 3.0.13 — 2025-01-19
- 3.0.12 — 2024-10-11
- 3.0.11 — 2024-08-07
- 3.0.10 — 2024-06-21
- 3.0.9 — 2024-04-03
- 3.0.8 — 2024-02-20
- 3.0.7 — 2024-02-09
- … 105 more at https://npm.io/package/vue-persistent-storage-manager/versions

## README

<h1 align="center">vue-persistent-storage-manager</h1>

<p align="center">
  <a href="https://github.com/DerYeger/yeger/actions/workflows/ci.yml">
    <img alt="CI" src="https://img.shields.io/github/actions/workflow/status/DerYeger/yeger/ci.yml?branch=main&label=ci&logo=github&color=#4DC71F">
  </a>
  <a href="https://www.npmjs.com/package/vue-persistent-storage-manager">
    <img alt="NPM" src="https://img.shields.io/npm/v/vue-persistent-storage-manager?logo=npm">
  </a>
  <a href="https://app.codecov.io/gh/DerYeger/yeger/tree/main/packages/vue-persistent-storage-manager">
    <img alt="Coverage" src="https://codecov.io/gh/DerYeger/yeger/branch/main/graph/badge.svg?token=DjcvNlg4hd&flag=vue-persistent-storage-manager">
  </a>
</p>

<p align="center">
  <a href="https://www.npmjs.com/package/vue">
    <img alt="npm peer dependency version" src="https://img.shields.io/npm/dependency-version/vue-persistent-storage-manager/peer/vue">
  </a>
  <a href="https://opensource.org/licenses/MIT">
    <img alt="MIT" src="https://img.shields.io/npm/l/vue-persistent-storage-manager?color=#4DC71F">
  </a>
</p>

> Vue plugin that wraps the [StorageManager](https://developer.mozilla.org/en-US/docs/Web/API/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

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

# npm
$ npm install 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
<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.

```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 install

# build for production
$ yarn build

# lint project files
$ yarn lint

# run tests
$ yarn test
```

## License

[MIT](./LICENSE) - Copyright &copy; Jan Müller

---
_Source: https://npm.io/package/vue-persistent-storage-manager · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._