@stainless-code/persist
Version:
Hydration-aware persistence for any reactive store — zero-dep persistSource core; codecs, backends, cross-tab transport, source + framework hydration adapters ship as opt-in recipes
55 lines (40 loc) • 1.36 kB
Markdown
name: vue-persist
description: Gate Vue 3 UI on Persist hydration with useHydrated (shallowRef). Use in setup/effectScope when avoiding flash of default state on async backends.
license: MIT
metadata:
type: framework
library: "@stainless-code/persist"
library_version: "0.4.1"
framework: "vue"
requires:
- persist
sources:
- stainless-code/persist:src/adapters/frameworks/vue.ts
# Vue hydration gate
`@stainless-code/persist/frameworks/vue` returns a `Ref<boolean>` (`shallowRef`). Call inside `setup()` / an active `effectScope()` so `onScopeDispose` unsubscribes.
## Install
```bash
bun add @stainless-code/persist vue
```
Peer: `vue` `>=3.3.0`.
## Minimal wiring
```ts
import { toHydrationSignal } from "@stainless-code/persist";
import { useHydrated } from "@stainless-code/persist/frameworks/vue";
const prefsHydration = toHydrationSignal(persist);
// in setup():
const hydrated = useHydrated(prefsHydration);
```
```vue
<Skeleton v-if="!hydrated" />
<PrefsPanel v-else />
```
## Common mistakes
- **Calling outside setup / scope** — leak or no teardown.
- **Treating the ref as store state.**
- **SSR / null signal.** Null stays `true`; there is no separate server snapshot (unlike React `getServerSnapshot`).
## API surface
- `useHydrated(signal) → Ref<boolean>`
See also: `persist-pinia` for Pinia store wiring.