Nuxt/docs/3.api/3.utils/refresh-nuxt-data.md

title	description	links
refreshNuxtData	refreshNuxtData refetches all data from the server and updates the page.	label icon to size Source i-simple-icons-github https://github.com/nuxt/nuxt/blob/main/packages/nuxt/src/app/composables/asyncData.ts xs

::note refreshNuxtData re-fetches all data from the server and updates the page as well as invalidates the cache of useAsyncData , useLazyAsyncData, useFetch and useLazyFetch. ::

::warning refreshNuxtData only works with composition API. asyncData hook from the Options API does not work with refreshNuxtData. ::

Type

refreshNuxtData(keys?: string | string[])

Parameters:

• keys:

  Type: String | String[]

  refreshNuxtData accepts a single or an array of strings as keys that are used to fetch the data. This parameter is optional. All useAsyncData and useFetch are re-fetched when no keys are specified.

Refresh All Data

This example below refreshes all data being fetched using useAsyncData and useFetch on the current page.

<script setup lang="ts">
const refreshing = ref(false)
const refreshAll = async () => {
  refreshing.value = true
  try {
    await refreshNuxtData()
  } finally {
    refreshing.value = false
  }
}
</script>

<template>
  <div>
    <button :disabled="refreshing" @click="refreshAll">
      Refetch All Data
    </button>
  </div>
</template>

Refresh Specific Data

This example below refreshes only data where the key matches to count.

<script setup lang="ts">
const { status, data: count } = await useLazyAsyncData('count', () => $fetch('/api/count'))
const refresh = () => refreshNuxtData('count')
</script>

<template>
  <div>
    {{ status === 'pending' ? 'Loading' : count }}
  </div>
  <button @click="refresh">Refresh</button>
</template>

:read-more{to="/docs/getting-started/data-fetching"}