Vue.js / Nuxt.js

Nuxt State Management

useState, Pinia with Nuxt, SSR state hydration, persistent state, global state patterns

18 interview questions·
Mid-Level
1

What is the main role of the useState composable in Nuxt?

Answer

The useState composable creates a reactive shared state that is SSR-compatible. It ensures that state created server-side is properly hydrated client-side, avoiding hydration mismatches between server and client rendering. Each component using the same key accesses the same shared state.

2

Why provide a unique key when using useState?

Answer

The key allows sharing state between multiple components and ensures SSR consistency. All components using the same key access the same reactive state. Without a key or with identical keys, states mix up and cause hard-to-debug issues.

3

How to correctly initialize state with useState?

Answer

useState accepts a key and an initialization function that returns the default value. The function executes only once server-side, then state is hydrated client-side. Never put a value directly (useState('key', 0)) as it doesn't work properly with SSR.

4

What is SSR hydration in the context of Nuxt state management?

5

What is the difference between useState and ref/reactive?

+15 interview questions

Master Vue.js / Nuxt.js for your next interview

Access all questions, flashcards, technical tests, code review exercises and interview simulators.

Start for free