NUXT
Share state across components with useState, never a module-level ref, on SSR
composables/useCart.ts
typescriptexport const useCart = () =>
useState<CartItem[]>('cart', () => [])
// DON'T do this in an SSR app:
// const cart = ref<CartItem[]>([]) // shared across ALL requests
// export const useCart = () => cartOn the server a module-level `ref` is created once and shared by every request, so one user's cart can leak into another's response — a real data-isolation bug, not just a style issue. `useState` is request-scoped and SSR-friendly: each request gets its own instance, and the value is serialized into the payload so it survives hydration. Always reach for `useState` (keyed) for cross-component shared state in Nuxt.
nuxt4statessrsecurity