Configurable persistence and rehydration of Pinia stores.
- Persist Pinia stores with a friendly API inspired by
vuex-persistedstate
. - Highly customizable (storage, serializer, paths picking/omitting).
- Out of the box SSR-friendly support for
Nuxt
. - Very smol (<2kB minzipped).
-
Install with your favorite package manager:
- pnpm :
pnpm add pinia-plugin-persistedstate
- npm :
npm i pinia-plugin-persistedstate
- yarn :
yarn add pinia-plugin-persistedstate
- pnpm :
-
Add the plugin to pinia:
import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)
- Add the
persist
option to the store you want to be persisted:
import { defineStore } from 'pinia'
export const useStore = defineStore('store', {
state: () => ({
someState: 'hello pinia',
}),
persist: true,
})
You can configure how a store is persisted by specifying options to the persist
property:
export const useStore = defineStore('store', () => {
const someState = ref('hello pinia')
return { someState }
}, {
persist: {
storage: sessionStorage,
pick: ['someState'],
},
})
All the available configuration options are explained here.
Nuxt support comes out of the box thanks to the included module. You just need to install the package and add the module to your nuxt.config.ts
as follows:
export default defineNuxtConfig({
modules: [
'@pinia/nuxt', // required
'pinia-plugin-persistedstate/nuxt',
],
})
More information on storages and configuration in Nuxt here.
There are several limitations that should be considered, more on those here.
See the contribution guide.
MIT © 2021-present Sacha Bouillez