Skip to content
TanStackIntent
TanStack Intent/Registry/@stainless-code/persist

@stainless-code/persist

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

vue-persist

55 linesSource

Gate Vue 3 UI on Persist hydration with useHydrated (shallowRef). Use in setup/effectScope when avoiding flash of default state on async backends.

Vue hydration gate

@stainless-code/persist/frameworks/vue returns a Ref<boolean> (shallowRef). Call inside setup() / an active effectScope() so onScopeDispose unsubscribes.

Install

shell
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.