refreshNuxtData

Refresh all or specific asyncData instances in Nuxt.

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

• Data Fetching Guide
• useAsyncData
• useFetch