Pinia Plugin Persistedstate

Configurable persistence and rehydration of Pinia stores.

Documentation

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

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:

1import { createPinia } from 'pinia'
2import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
3
4const pinia = createPinia()
5pinia.use(piniaPluginPersistedstate)

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

1import { defineStore } from 'pinia'
2
3export const useStore = defineStore('store', {
4  state: () => ({
5    someState: 'hello pinia',
6  }),
7  persist: true,
8})

Configuration

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

1export const useStore = defineStore('store', () => {
2  const someState = ref('hello pinia')
3  return { someState }
4}, {
5  persist: {
6    storage: sessionStorage,
7    pick: ['someState'],
8  },
9})

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:

1export default defineNuxtConfig({
2  modules: [
3    '@pinia/nuxt', // required
4    'pinia-plugin-persistedstate/nuxt',
5  ],
6})

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