## Install
```bash
npm install --save vuex-persistedstate
```
The [UMD](https://github.com/umdjs/umd) build is also available on [unpkg](https://unpkg.com):
```html
```
You can find the library on `window.createPersistedState`.
## Usage
```js
import { createStore } from "vuex";
import createPersistedState from "vuex-persistedstate";
const store = createStore({
// ...
plugins: [createPersistedState()],
});
```
For usage with for Vuex 3 and Vue 2, please see [3.x.x branch](https://github.com/robinvdvleuten/vuex-persistedstate/tree/3.x.x).
## Examples
Check out a basic example on [CodeSandbox](https://codesandbox.io).
[](https://codesandbox.io/s/80k4m2598)
Or configured to use with [js-cookie](https://github.com/js-cookie/js-cookie).
[](https://codesandbox.io/s/xl356qvvkz)
Or configured to use with [secure-ls](https://github.com/softvar/secure-ls)
[](https://codesandbox.io/s/vuex-persistedstate-with-secure-ls-encrypted-data-7l9wb?fontsize=14)
### Example with Vuex modules
New plugin instances can be created in separate files, but must be imported and added to plugins object in the main Vuex file.
```js
/* module.js */
export const dataStore = {
state: {
data: []
}
}
/* store.js */
import { dataStore } from './module'
const dataState = createPersistedState({
paths: ['data']
})
export new Vuex.Store({
modules: {
dataStore
},
plugins: [dataState]
})
```
### Example with Nuxt.js
It is possible to use vuex-persistedstate with Nuxt.js. It must be included as a NuxtJS plugin:
#### With local storage (client-side only)
```javascript
// nuxt.config.js
...
/*
* Naming your plugin 'xxx.client.js' will make it execute only on the client-side.
* https://nuxtjs.org/guide/plugins/#name-conventional-plugin
*/
plugins: [{ src: '~/plugins/persistedState.client.js' }]
...
```
```javascript
// ~/plugins/persistedState.client.js
import createPersistedState from 'vuex-persistedstate'
export default ({store}) => {
createPersistedState({
key: 'yourkey',
paths: [...]
...
})(store)
}
```
#### Using cookies (universal client + server-side)
Add `cookie` and `js-cookie`:
`npm install --save cookie js-cookie`
or `yarn add cookie js-cookie`
```javascript
// nuxt.config.js
...
plugins: [{ src: '~/plugins/persistedState.js'}]
...
```
```javascript
// ~/plugins/persistedState.js
import createPersistedState from 'vuex-persistedstate';
import * as Cookies from 'js-cookie';
import cookie from 'cookie';
export default ({ store, req }) => {
createPersistedState({
paths: [...],
storage: {
getItem: (key) => {
// See https://nuxtjs.org/guide/plugins/#using-process-flags
if (process.server) {
const parsedCookies = cookie.parse(req.headers.cookie);
return parsedCookies[key];
} else {
return Cookies.get(key);
}
},
// Please see https://github.com/js-cookie/js-cookie#json, on how to handle JSON.
setItem: (key, value) =>
Cookies.set(key, value, { expires: 365, secure: false }),
removeItem: key => Cookies.remove(key)
}
})(store);
};
```
## API
### `createPersistedState([options])`
Creates a new instance of the plugin with the given options. The following options
can be provided to configure the plugin for your specific needs:
- `key