Nuxt: [nuxt] [useAsyncData] key must be a string / useFetch only works inside setup, plugins or middleware
useFetch/useAsyncData were used in an event handler, after an await, or without a key where one is required.
[nuxt] [useAsyncData] key must be a stringuseFetch is a composable and should only be called in setup[nuxt] A composable that requires access to the Nuxt instance was called outside of a pluginuseAsyncData is called outside setupNuxt useFetch called inside event handler Meaning
Call them synchronously during setup. For user-triggered requests use $fetch (no SSR caching) or refresh()/execute() on the returned object. Provide a unique key to useAsyncData when not auto-generated (e.g. in wrapper composables).
Common causes
- Called in click handler/watch callback
- After an
awaitin setup (context lost) - Missing/duplicate key in composables
- Used inside plain utility functions
- Inside a plugin without
runWithContext
⚡ Quick fix
- Use
$fetchfor event-driven calls - Call
useFetchat the top level of setup andrefresh()later - Add unique keys:
useAsyncData("posts", ...)
Detailed fix by platform
Nuxt
const { data, refresh } = await useFetch("/api/posts"); // refresh() in handlers
How to diagnose
- Call site — Setup?
- Trigger — Event?
- Key — Unique?
🔧 Still not fixed?
Many errors look alike. If the steps above didn’t solve it, one of these is probably what you’re facing:
Similar errors
- [Vue warn]: onMounted is called when there is no active component instance Vue: [Vue warn]: onMounted is called when there is no active component instance to be associated with
- Nuxt 404: Page not found (route/file naming) Nuxt: 404 Page not found: /blog/my-post / [Vue Router warn]: No match found for location with path
- Nuxt: Failed to fetch dynamically imported module (after deploy) Nuxt: [nuxt] error caught during app initialization TypeError: Failed to fetch dynamically imported module / Loading chunk failed
Most viewed in Vue
- Property was accessed during render but is not defined Vue: [Vue warn]: Property "x" was accessed during render but is not defined on instance
- Failed to resolve component Vue: [Vue warn]: Failed to resolve component: x
- Avoid mutating a prop directly Vue: [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders
Other ways to find it
Where this error sits
Origin: On your device. Errors that are often confused with or caused by this one (click to open):
🧠 Still stuck? Analyze your error
Paste the full message, response headers or stack trace — we'll detect the platform and point to the most likely cause.
💬 What worked for others
No tips yet — did something else fix this for you?
Share what worked for you
Tips are checked by an editor before they appear. Links are removed.
Report a correction or suggest an improvement
Last updated 5 Nov 2026