https://github.com/prazdevs/pinia-plugin-persistedstate-next
https://github.com/prazdevs/pinia-plugin-persistedstate-next
Last synced: about 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/prazdevs/pinia-plugin-persistedstate-next
- Owner: prazdevs
- Created: 2024-08-24T13:38:49.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-08-28T13:05:42.000Z (almost 2 years ago)
- Last Synced: 2025-03-10T06:37:31.887Z (over 1 year ago)
- Language: TypeScript
- Size: 597 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
pinia-plugin-persistedstate
Configurable persistence and rehydration of Pinia stores.
> [!IMPORTANT]
> We are actively looking for contributors to help us translate the documentation in various language (especially Chinese) to improve user experience. If you are interested, open an issue about it!
## 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`]().
- 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-3).
## 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)