メニュー
Gate Vue 3 UI on Persist hydration with useHydrated (shallowRef). Use in setup/effectScope when avoiding flash of default state on async backends.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Gate Alpine.js UI on Persist hydration (Alpine.plugin + useHydrated / $hydrated). Use when wiring HydrationSignal into Alpine data components.
Gate Angular UI on Persist hydration with useHydrated (readonly Signal). Call inside an injection context; use when avoiding flash of default state on async backends.
Gate Lit element UI on Persist hydration with HydrationController. Use when wiring HydrationSignal into a ReactiveControllerHost; not a hook.
Persist with React Native AsyncStorage via @stainless-code/persist/backends/async-storage. Use for RN string-wire JSON state; always gate with useHydrated.
Compress a string-wire StateStorage with @stainless-code/persist/backends/compressed (gzip/deflate). Backend wrapper — compose with createStorage; stack compress-then-encrypt.
Cross-tab sync for backends without storage events via @stainless-code/persist/transport/crosstab (createBroadcastCrossTab). Wrap storage + pass crossTabEventTarget; call close() on teardown.
| 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"] |
@stainless-code/persist/frameworks/vue returns a Ref<boolean> (shallowRef). Call inside setup() / an active effectScope() so onScopeDispose unsubscribes.
bun add @stainless-code/persist vue
Peer: vue >=3.3.0.
import { toHydrationSignal } from "@stainless-code/persist";
import { useHydrated } from "@stainless-code/persist/frameworks/vue";
const prefsHydration = toHydrationSignal(persist);
// in setup():
const hydrated = useHydrated(prefsHydration);
<Skeleton v-if="!hydrated" />
<PrefsPanel v-else />
true; there is no separate server snapshot (unlike React getServerSnapshot).useHydrated(signal) → Ref<boolean>See also: persist-pinia for Pinia store wiring.