`useNuxtData()`

Accesses the cached payload of a previous useAsyncData/useFetch call by key.

Since Nuxt 3.0 Spec ↗

Syntax

const { data } = useNuxtData(key)

Parameters

Name	Type	Required	Description
`key`	`string`	Yes	The cache key of an existing `useFetch`/`useAsyncData` call.

Returns

{ data: Ref<T | null> } — A ref to the shared cached data for the key.

Examples

<script setup lang="ts">
// List page caches under key "posts"
await useFetch('/api/posts', { key: 'posts' })
</script>

<script setup lang="ts">
// Detail page seeds instantly from the list cache, then refreshes
const { data: cached } = useNuxtData('posts')
const route = useRoute()
const { data: post } = await useFetch(`/api/posts/${route.params.id}`, {
  key: `post-${route.params.id}`,
  default: () =>
    cached.value?.find((p: any) => p.id === route.params.id),
})
</script>

Notes

Enables optimistic UI and cache-then-network patterns by reusing data already in the Nuxt payload. The returned `data` ref is shared with the original call, so mutating it updates everywhere. Returns `null` if no entry exists for the key yet.