Pass server state to client in Nuxt and name the composable

WHAT THIS TESTS: Whether you understand how Nuxt bridges server and client state during SSR without duplicate data fetching. The interviewer wants to know if you grasp hydration, serialization boundaries, and server request isolation.

A GOOD ANSWER COVERS: Four things in order. First, name useState as the key composable and describe it as an SSR-friendly ref replacement. Second, explain the hydration flow: the server runs useState, serializes the value into the HTML payload as JSON, and the client picks up that exact value on hydration instead of re-fetching. Third, stress the serialization constraint because the payload is JSON, meaning no classes, functions, or symbols can live inside useState. Fourth, mention the unique key requirement so multiple components share the same reactive state, and contrast this with a plain ref defined outside setup which creates shared mutable state across concurrent server requests and leads to memory leaks.

COMMON WRONG ANSWERS: Suggesting a global const state = ref({}) in a module file. This is dangerous in Nuxt because the same module instance is reused across requests on the server, causing cross-user data leakage. Another red flag is jumping straight to Pinia without explaining how its state reaches the client; Pinia works but only if you understand it relies on the same underlying serialization and hydration. Also, claiming useState avoids serialization or handles non-JSON data.

LIKELY FOLLOW-UPS: How would you initialize state asynchronously on the server once per app load? The expected answer is callOnce inside app.vue. What happens if you mutate useState on the client after hydration? The answer is it becomes reactive and updates components normally. How do you invalidate cached state globally? Mention clearNuxtState. When is Pinia preferable over useState? Pinia shines for complex cross-component logic, while useState is ideal for simple shared SSR state.

ONE CONCRETE EXAMPLE: Suppose you fetch a website configuration object from a CMS. On the server, inside a composable or app.vue, you write const config = useState('website-config', async () => await $fetch('/api/config')). The server executes the fetch, populates config.value, and Nuxt serializes that object into the rendered HTML. When the browser hydrates, the client script reads the serialized JSON, injects it into useState('website-config'), and the page renders instantly without a second network request. If a plain ref were used instead and exported from a shared file, every concurrent visitor would overwrite the same server-side object.

Source: nuxt.com