# @nuxtjs/universal-storage

> Universal Storage Utilities for Nuxt

Latest version **0.5.9** (published 2021-04-11) · MIT license · 0 weekly downloads

## Install

```sh
npm install @nuxtjs/universal-storage
pnpm add @nuxtjs/universal-storage
yarn add @nuxtjs/universal-storage
bun add @nuxtjs/universal-storage
```

## Health

**Score 40/100 (D)** — status: abandoned.

Positive: has types; no vulnerabilities; high maintenance score; high quality score.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 0.5.9 |
| Published | 2021-04-11 |
| First published | 2019-07-11 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 5 |
| Unpacked size | 21.9 KB |
| Known vulnerabilities | 0 (+2 in 2 direct dependencies) |
| Install scripts | no |
| GitHub stars | 273 |
| Maintainers | clarkdo, pi0, atinux, alexchopin, kevinmarrec, farzadso |

## Links

- npm: https://www.npmjs.com/package/@nuxtjs/universal-storage
- Repository: https://github.com/nuxt-community/universal-storage-module
- Homepage: https://github.com/nuxt-community/universal-storage-module#readme
- Issues: https://github.com/nuxt-community/universal-storage-module/issues
- npm.io page: https://npm.io/package/@nuxtjs/universal-storage

## Dependencies (5)

- [defu](https://npm.io/package/defu.md) ^3.2.2
- [upath](https://npm.io/package/upath.md) ^2.0.1
- [cookie](https://npm.io/package/cookie.md) ^0.4.1
- [uri-js](https://npm.io/package/uri-js.md) ^4.4.1
- [dotprop](https://npm.io/package/dotprop.md) ^1.2.1

## Recent versions

- 0.5.9 (latest) — 2021-04-11
- 0.5.8 — 2021-04-11
- 0.5.7 — 2021-01-17
- 0.5.6 — 2020-12-26
- 0.5.5 — 2020-05-06
- 0.5.4 — 2020-02-06
- 0.5.1 — 2020-02-06
- 0.5.0 — 2020-01-24
- 0.4.0 — 2019-07-11

## README

# Nuxt Universal Storage Module

[![npm (scoped with tag)](https://img.shields.io/npm/v/@nuxtjs/universal-storage/latest.svg)](https://npmjs.com/package/@nuxtjs/universal-storage)
[![npm](https://img.shields.io/npm/dt/@nuxtjs/universal-storage.svg)](https://npmjs.com/package/@nuxtjs/universal-storage)
[![GitHub Actions](https://github.com/nuxt-community/universal-storage-module/actions/workflows/ci.yml/badge.svg)](https://circleci.com/gh/nuxt-community/universal-storage-module)
[![Codecov](https://img.shields.io/codecov/c/github/nuxt-community/universal-storage-module.svg)](https://codecov.io/gh/nuxt-community/universal-storage-module)
[![Dependencies](https://david-dm.org/nuxt-community/universal-storage-module/status.svg)](https://david-dm.org/nuxt-community/universal-storage-module)
[![js-standard-style](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](http://standardjs.com)

> Universal Storage Utilities for Nuxt.js based on [@nuxt-community/auth-module](https://github.com/nuxt-community/auth-module)

[📖 **Release Notes**](./CHANGELOG.md)

## Setup

- Add `@nuxtjs/universal-storage` dependency using yarn or npm to your project

```sh
yarn add @nuxtjs/universal-storage
```

OR

```sh
npm install @nuxtjs/universal-storage --save
```

- Add `@nuxtjs/universal-storage` to the `modules` section of your `nuxt.config.js` file

```js
{
  modules: [
    '@nuxtjs/universal-storage',
  ],

  storage: {

  }
}
```

## Usage

### Options

Options are defined as following:

```js
 storage: {
  vuex, // boolean or {namespace}
  localStorage, // boolean or {prefix}
  cookie, // boolean or {prefix, options}
  initialState,  // Object {}
  ignoreExceptions //
 }
```

and default to the following values:

```js
 {
  vuex: {
    namespace: 'storage'
  },
  cookie: {
    prefix: '',
    options: {
      path: '/'
    }
  },
  localStorage: {
    prefix: ''
  },
  ignoreExceptions: false,
}
```

### Full synchronise on start with initialState as default

Since version 0.4.0 this module allows full state synchronisation with `cookies`, `localStorage` and `initialState` as a default value. That allows for a very neat usage pattern:
For example, if you have an `initialState` like the following in your `nuxt.config.js` file:

```js
  storage: {
    initialState: { testParam: false }
  }
```

then in my component I can simply declare (with decorators)

```js
  @State(s => s.storage.testParam)
  testParam
```

or (with mapState)

```js
  computed: mapState({
    testParam: s => s.storage.testParam
  })
```

Afterwards you can get the computed property `testParam` with whatever value it had in your last session and on change you just have to call `this.$storage.setUniversal("testParam", newVal)` to get the new value saved.

### Hidden settings (private state)

> Private state is suitable to keep information not being exposed to the Vuex store.
> This helps prevent stealing tokens from the SSR response HTML.

If the key name starts with `_` then that value is kept separate in the memory storage and not exposed to the Vuex store like the rest of the values.

For example:

```js
  $storage.setState("_password", "alpha1")
```

### Api

- `$storage.getUniversal(key)`

- `$storage.setUniversal(key, value)`

- `$storage.syncUniversal(key, defaultValue)`

- `$storage.removeUniversal(key)`

- `$storage.getState(key)`

- `$storage.setState(key, value)`

- `$storage.removeState(key)`

- `$storage.watchState(key, fn)`

- `$storage.getLocalStorage(key)`

- `$storage.setLocalStorage(key, value)`

- `$storage.removeLocalStorage(key)`

- `$storage.getCookies()`

- `$storage.getCookie(key)`

- `$storage.setCookie(key, value)`

- `$storage.removeCookie(key)`

## Development

- Clone this repository
- Install dependencies using `yarn install` or `npm install`
- Start development server using `yarn run dev` or `npm run dev`
- Point your browser to `http://localhost:3000`

## Roadmap

- Add Encryption
- Universal Session Handling

## License

[MIT License](./LICENSE)

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