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