prazdevs
Pinia Plugin Persistedstate
Configurable persistence and rehydration of Pinia stores.
Features
- 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).
Quickstart
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
persistoption to the store you want to be persisted:
import { defineStore } from 'pinia'
export const useStore = defineStore('store', {
state: () => ({
someState: 'hello pinia',
}),
persist: true,
})Configuration
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.
Usage with Nuxt
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.
Limitations
There are several limitations that should be considered, more on those here.
Contributing
See the contribution guide.
License
MIT © 2021-present Sacha Bouillez