Repository files navigation

Configurable persistence and rehydration of Pinia stores.

Documentation

• Persist Pinia stores with a friendly API inspired byvuex-persistedstate.
• Highly customizable (storage, serializer, paths picking/omitting).
• Out of the box SSR-friendly support forNuxt.
• Very smol (<2kB minzipped).

1. Install with your favorite package manager:

   • pnpm :pnpm add pinia-plugin-persistedstate
   • npm :npm i pinia-plugin-persistedstate
   • yarn :yarn add pinia-plugin-persistedstate

2. Add the plugin to pinia:

import{createPinia}from'pinia'importpiniaPluginPersistedstatefrom'pinia-plugin-persistedstate'constpinia=createPinia()pinia.use(piniaPluginPersistedstate)

3. Add thepersist option to the store you want to be persisted:

import{defineStore}from'pinia'exportconstuseStore=defineStore('store',{state:()=>({someState:'hello pinia',}),persist:true,})

You can configure how a store is persisted by specifying options to thepersist property:

exportconstuseStore=defineStore('store',()=>{constsomeState=ref('hello pinia')return{ someState}},{persist:{storage:sessionStorage,pick:['someState'],},})

All the available configuration options are explainedhere.

Nuxt support comes out of the box thanks to the included module. You just need to install the package and add the module to yournuxt.config.ts as follows:

exportdefaultdefineNuxtConfig({modules:['@pinia/nuxt',// required'pinia-plugin-persistedstate/nuxt',],})

More information on storages and configuration in Nuxthere.

There are several limitations that should be considered, more on thosehere.

See thecontribution guide.

MIT © 2021-presentSacha Bouillez