Nuxt 3's composables form the backbone of data fetching and state management in Vue 3 applications. Test your understanding of when and why to use each composable.
0 / 5 completed
1 / 5
What is the key difference between useAsyncData and useFetch in Nuxt 3?
useFetch is syntactic sugar that combines useAsyncData with Nuxt's $fetch utility. Use useFetch('/api/data') for simple URL fetches, and useAsyncData('key', () => myCustomCall()) when you need a custom async function or explicit deduplication key.
2 / 5
What problem does useState in Nuxt 3 solve that Vue's ref() does not?
Nuxt's useState creates state that is serialised from the server and re-used on the client during hydration, preventing hydration mismatches. It also deduplicates by key — calling useState('myKey', () => 0) in multiple components returns the same reactive reference, acting as a lightweight global store.
3 / 5
What does useRuntimeConfig provide in a Nuxt 3 application?
useRuntimeConfig() exposes the configuration from the runtimeConfig key in nuxt.config.ts. Public values (under public) are available on both server and client; private values are server-only. This separates build-time constants from runtime secrets injected via environment variables.
4 / 5
When using useAsyncData, what does the key parameter prevent?
The key in useAsyncData uniquely identifies the request so Nuxt can deduplicate it across the component tree. If two components call useAsyncData('products', fetchProducts) with the same key, only one fetch runs; both components share the cached result. Without a stable key, Nuxt may refetch unnecessarily on hydration.
5 / 5
What is the purpose of defineNuxtPlugin?
defineNuxtPlugin() is used in plugins/ directory files to register code that runs when the Nuxt app initialises — both on server and client (or one side only, using filename suffixes like .client.ts). Plugins receive the nuxtApp instance and can provide helpers, configure libraries, or add global error handlers.