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 example below shows how you can use cached data as a placeholder while the most recent data is being fetched from the server.
pages/posts.vue
<script setup>// We can access same data later using 'posts' keyconst { data } = await useFetch('/api/posts', { key: 'posts' })</script>pages/posts/[id].vue
// Access to the cached value of useFetch in posts.vue (parent route)const { id } = useRoute().paramsconst { data: posts } = useNuxtData('posts')const { data } = useLazyFetch(`/api/posts/${id}`, { key: `post-${id}`, default() { // Find the individual post from the cache and set it as the default value. return posts.value.find(post => post.id === id) }})Optimistic Updates
We can leverage the cache to update the UI after a mutation, while the data is being invalidated in the background.
pages/todos.vue
<script setup>// We can access same data later using 'todos' keyconst { data } = await useAsyncData('todos', () => $fetch('/api/todos'))</script>components/NewTodo.vue
<script setup>const newTodo = ref('')const previousTodos = ref([])// Access to the cached value of useFetch in todos.vueconst { data: todos } = useNuxtData('todos')const { data } = await useFetch('/api/addTodo', { method: 'post', body: { todo: newTodo.value }, onRequest () { previousTodos.value = todos.value // Store the previously cached value to restore if fetch fails. todos.value.push(newTodo.value) // Optimistically update the todos. }, onRequestError () { todos.value = previousTodos.value // Rollback the data if the request failed. }, async onResponse () { await refreshNuxtData('todos') // Invalidate todos in the background if the request succeeded. }})</script>Type
useNuxtData<DataT = any> (key: string): { data: Ref<DataT | null> }