| 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
bun add @stainless-code/persist vue
Peer: vue >=3.3.0.
Minimal wiring
import { toHydrationSignal } from "@stainless-code/persist";
import { useHydrated } from "@stainless-code/persist/frameworks/vue";
const prefsHydration = toHydrationSignal(persist);
const hydrated = useHydrated(prefsHydration);
<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.