useNuxtData

Access the current cached value of data fetching composables.

useNuxtData gives you access to the current cached value of useAsyncData, useLazyAsyncData, useFetch and useLazyFetch with explicitly provided key.

Usage

The useNuxtData composable is used to access the current cached value of data-fetching composables such as useAsyncData, useLazyAsyncData, useFetch, and useLazyFetch. By providing the key used during the data fetch, you can retrieve the cached data and use it as needed.

This is particularly useful for optimizing performance by reusing already-fetched data or implementing features like Optimistic Updates or cascading data updates.

To use useNuxtData, ensure that the data-fetching composable (useFetch, useAsyncData, etc.) has been called with an explicitly provided key.

Parameters

key · string · required

The unique key that identifies the cached data. This key should match the one used during the original data fetch.

Return Values

data · Ref<T | undefined>

A reactive reference to the cached data associated with the provided key. If no cached data exists, the value will be null. This Ref automatically updates if the cached data changes, allowing seamless reactivity in your components.

Examples

Basic Usage

The example below shows how you can use cached data as a placeholder while the most recent data is being fetched from the server.

[app/pages/posts.vue]

<script setup lang="ts">
// We can access same data later using 'posts' key
const { data } = await useFetch('/api/posts', { key: 'posts' })
</script>

[app/pages/posts/[id].vue]

<script setup lang="ts">
// Access to the cached value of useFetch in posts.vue (parent route)
const { data: posts } = useNuxtData('posts')

const route = useRoute()

const { data } = useLazyFetch(`/api/posts/${route.params.id}`, {
  key: `post-${route.params.id}`,
  default () {
    // Find the individual post from the cache and set it as the default value.
    return posts.value.find(post => post.id === route.params.id)
  },
})
</script>

Optimistic Updates

The example below shows how implementing Optimistic Updates can be achieved using useNuxtData.

Optimistic Updates is a technique where the user interface is updated immediately, assuming a server operation will succeed. If the operation eventually fails, the UI is rolled back to its previous state.

[app/pages/todos.vue]

<script setup lang="ts">
// We can access same data later using 'todos' key
const { data } = await useAsyncData('todos', (_nuxtApp, { signal }) => $fetch('/api/todos', { signal }))
</script>

[app/components/NewTodo.vue]

<script setup lang="ts">
const newTodo = ref('')
let previousTodos = []

// Access to the cached value of useAsyncData in todos.vue
const { data: todos } = useNuxtData('todos')

async function addTodo () {
  await $fetch('/api/addTodo', {
    method: 'post',
    body: {
      todo: newTodo.value,
    },
    onRequest () {
      // Store the previously cached value to restore if fetch fails.
      previousTodos = todos.value

      // Optimistically update the todos.
      todos.value = [...todos.value, newTodo.value]
    },
    onResponseError () {
      // Rollback the data if the request failed.
      todos.value = previousTodos
    },
    async onResponse () {
      // Invalidate todos in the background if the request succeeded.
      await refreshNuxtData('todos')
    },
  })
}
</script>

Type

export function useNuxtData<DataT = any> (
  key: string
): { data: Ref<DataT | undefined> }