create-global-state

Lift a state factory into application-wide state shared by every caller.

Minimal setup

Use a Vue 3.5+ project with Vue SFC compilation configured (see Vite+ integration).

vp install @vizejs/composable

Import the entry directly. Call lifecycle-bound utilities inside <script setup> so cleanup follows the component scope; consult the runtime contract for this entry's SSR and hydration behavior.

import { createGlobalState } from "@vizejs/composable/create-global-state";

Runtime contract

API

createGlobalState

Lift a state factory into application-wide state shared by every caller. The factory runs once, lazily on the first call, inside a detached effect scope so its watchers and computeds outlive any component; every later call returns the same state. Because the state is module-level, it is shared across all server requests: on the server, keep per-request state in provide/createInjectionState instead, or reset it per request.

function createGlobalState<State>(factory: () => State): () => State

const useSession = createGlobalState(() => ({ user: shallowRef<User | null>(null) }));
useSession().user.value = currentUser;