https://github.com/prazdevs/pinia-plugin-persistedstate

💾 Configurable persistence and rehydration of Pinia stores.
https://github.com/prazdevs/pinia-plugin-persistedstate

nuxt nuxt-module pinia pinia-plugin

Last synced: 7 days ago
JSON representation

💾 Configurable persistence and rehydration of Pinia stores.

• Host: GitHub
• URL: https://github.com/prazdevs/pinia-plugin-persistedstate
• Owner: prazdevs
• License: mit
• Created: 2021-10-25T13:32:18.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2024-10-25T15:17:03.000Z (4 months ago)
• Last Synced: 2024-10-29T14:51:03.519Z (3 months ago)
• Topics: nuxt, nuxt-module, pinia, pinia-plugin
• Language: TypeScript
• Homepage: https://prazdevs.github.io/pinia-plugin-persistedstate/
• Size: 5.56 MB
• Stars: 2,090
• Watchers: 11
• Forks: 121
• Open Issues: 6
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md
  • Codeowners: .github/CODEOWNERS

Awesome Lists containing this project

• awesome - prazdevs/pinia-plugin-persistedstate - 🍍 Configurable persistence and rehydration of Pinia stores. (TypeScript)

README

        


  





  Pinia Plugin Persistedstate





  Configurable persistence and rehydration of Pinia stores.





  

  

  





  Documentation



## Features

- Persist Pinia stores with a friendly API inspired by [`vuex-persistedstate`](https://github.com/robinvdvleuten/vuex-persistedstate).

- Highly customizable (storage, serializer, paths picking/omitting).

- Out of the box SSR-friendly support for [`Nuxt`](#usage-with-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:

```ts

import { createPinia } from 'pinia'

import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

const pinia = createPinia()

pinia.use(piniaPluginPersistedstate)

```

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

```ts

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:

```ts

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](https://prazdevs.github.io/pinia-plugin-persistedstate/guide/config).

## 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:

```ts

export default defineNuxtConfig({

  modules: [

    '@pinia/nuxt', // required

    'pinia-plugin-persistedstate/nuxt',

  ],

})

```

More information on storages and configuration in Nuxt [here](https://prazdevs.github.io/pinia-plugin-persistedstate/frameworks/nuxt).

## Limitations

There are several limitations that should be considered, more on those [here](https://prazdevs.github.io/pinia-plugin-persistedstate/guide/limitations).

## Contributing

See the [contribution guide](https://github.com/prazdevs/pinia-plugin-persistedstate/blob/main/CONTRIBUTING.md).

## License

[MIT](https://github.com/prazdevs/pinia-plugin-persistedstate/blob/main/LICENSE) © 2021-present [Sacha Bouillez](https://github.com/prazdevs)