Skip to main content
refreshNuxtData is used to refetch all or specific asyncData instances, including those from useAsyncData, useLazyAsyncData, useFetch, and useLazyFetch.
If your component is cached by <KeepAlive> and enters a deactivated state, the asyncData inside the component will still be refetched until the component is unmounted.

​
Type Signature

function refreshNuxtData(keys?: string | string[]): Promise<void>

​
Parameters

​
keys
string | string[]
A single string or an array of strings as keys that are used to fetch the data. When no keys are specified, all useAsyncData and useFetch keys are re-fetched.

​
Return Value

Returns a promise that resolves when all or specific asyncData instances have been refreshed.

​
Examples

​
Refresh All Data

This example refreshes all data being fetched using useAsyncData and useFetch in the Nuxt application: 
<script setup lang="ts">
const refreshing = ref(false)

async function refreshAll() {
  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 refreshes only data where the key matches count or user: 
<script setup lang="ts">
const refreshing = ref(false)

async function refresh() {
  refreshing.value = true
  try {
    // You could also pass an array of keys to refresh multiple data
    await refreshNuxtData(['count', 'user'])
  } finally {
    refreshing.value = false
  }
}
</script>

<template>
  <div v-if="refreshing">
    Loading
  </div>
  <button @click="refresh">
    Refresh
  </button>
</template>

​
Notes

If you have access to the asyncData instance, it is recommended to use its refresh or execute method as the preferred way to refetch the data.

​
See Also