refreshNuxtData
refreshNuxtData refetches all data from the server and updates the page.
refreshNuxtData re-fetches all data from the server and updates the page as well as invalidates the cache of useAsyncData , useLazyAsyncData, useFetch and useLazyFetch.Type
refreshNuxtData(keys?: string | string[])Parameters:
keys:
Type:String | String[]refreshNuxtDataaccepts a single or an array of strings askeysthat are used to fetch the data. This parameter is optional. AlluseAsyncDataanduseFetchare re-fetched when nokeysare specified.
Refresh All Data
This example below refreshes all data being fetched using useAsyncData and useFetch on the current page.
pages/some-page.vue
<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.
pages/some-page.vue
<script setup lang="ts">const { pending, data: count } = await useLazyAsyncData('count', () => $fetch('/api/count'))const refresh = () => refreshNuxtData('count')</script><template> <div> {{ pending ? 'Loading' : count }} </div> <button @click="refresh">Refresh</button></template>