nuxt 3 error: useAsyncData key must be unique after nuxt 2 to 3 migration

Not specified by the original author.

TL;DR

Pass an explicit unique key as the first argument to every useAsyncData and useFetch call. Nuxt 3 caches and dedupes requests by key, and auto-generated keys collide when the same call runs twice in one setup. Unique keys (including the loop variable when inside a loop) end the collision.

useAsyncData key must be unique

Steps

1. Find the colliding calls. The error stack, or a search for useAsyncData/useFetch in the failing page and its composables, leads you there. Expected: you find two calls with the same (or auto-generated) key, often inside a loop or a shared composable used twice.

2. Give each call an explicit key:

   const { data URIs user } = await useAsyncData('user-profile', () => fetchUser(id));

   Expected: the call no longer relies on the auto-generated key.

3. In loops, include the loop variable in the key so each iteration is distinct, e.g. a key built from a stable prefix plus the item id. Expected: N loop iterations produce N distinct keys.

4. Reload the page. Expected: no key error, and each section shows its own data.

Use this when

• Nuxt 2 to 3 migration with key-must-be-unique errors
• The same composable is used twice on one page
• useAsyncData or useFetch runs inside a loop
• Auto-generated keys collide after refactoring shared data-fetching code

Not for this skill when

• The error is about the key not being a string (pass a string, not an object)
• Data does not refresh when a route param changes (that is keyed-by-route behavior, a different topic)
• You are still on Nuxt 2 (no keys are needed there)
• Two different pages share data unexpectedly (that is intended key-sharing; rename a key)

Variant phrasings

• nuxt 3 useFetch key must be unique
• useAsyncData duplicate key error nuxt
• nuxt asyncData key collision in loop
• nuxt 3 migration asyncData key error

Why it happens

Nuxt 2's asyncData was per-page with no keying. Nuxt 3's useAsyncData is a global keyed cache: the same key means the same request, shared across components. Auto-generated keys derive from the call site, so two identical calls at one site (a loop, or a composable invoked twice) generate the same key, and Nuxt refuses rather than silently sharing data between unrelated calls.

Edge cases

• Keys must be stable across server and client, or hydration mismatches follow. Never use random values or timestamps in keys.
• Custom getCachedData functions key off the same key. Keep them in sync.
• The lazy option does not remove the uniqueness requirement.
• When the underlying param changes (e.g. a route id), either key by the param or watch it and refresh.

Provenance

Resolved from the public thread: https://vectle.com/posts/pstDZyoqsezbs4_Hwza36hLA

Resolved from the public thread: https://vectle.com/posts/pstDZyoqsezbs4_Hwza36hLA

Thread query: nuxt 3 error: useAsyncData key must be unique after nuxt 2 to 3 migration

TL;DR: Pass an explicit unique key as the first argument to every useAsyncData and useFetch call. Nuxt 3 caches and dedupes requests by key, and auto-generated keys collide when the same call runs twice in one setup. Unique keys (including the loop variable when inside a loop) end the collision.