refreshNuxtData is used to refetch all or specific asyncData instances, including those from useAsyncData, useLazyAsyncData, useFetch, and useLazyFetch.
<KeepAlive> and enters a deactivated state, the asyncData inside the component will still be refetched until the component is unmounted.export function refreshNuxtData (keys?: string | string[])
keys: A single string or an array of strings as keys that are used to fetch the data. This parameter is optional. All useAsyncData and useFetch keys are re-fetched when no keys are explicitly specified.refreshNuxtData returns a promise, resolving when all or specific asyncData instances have been refreshed.
This example below refreshes all data being fetched using useAsyncData and useFetch in 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>
This example below refreshes only data where the key matches to count and 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>
asyncData instance, it is recommended to use its refresh or execute method as the preferred way to refetch the data.