callOnce
Run a given function or block of code once during SSR or CSR.
This utility is available since Nuxt v3.9.
Purpose
The callOnce function is designed to execute a given function or block of code only once during:
- server-side rendering but not hydration
- client-side navigation
This is useful for code that should be executed only once, such as logging an event or setting up a global state.
Usage
app.vue
<script setup lang="ts">
const websiteConfig = useState('config')
await callOnce(async () => {
console.log('This will only be logged once')
websiteConfig.value = await $fetch('https://my-cms.com/api/website-config')
})
</script>
Note that
callOnce doesn't return anything. You should use useAsyncData or useFetch if you want to do data fetching during SSR.callOnce is a composable meant to be called directly in a setup function, plugin, or route middleware, because it needs to add data to the Nuxt payload to avoid re-calling the function on the client when the page hydrates.Type
callOnce(fn?: () => any | Promise<any>): Promise<void>
callOnce(key: string, fn?: () => any | Promise<any>): Promise<void>
key: A unique key ensuring that the code is run once. If you do not provide a key, then a key that is unique to the file and line number of the instance ofcallOncewill be generated for you.fn: The function to run once. This function can also return aPromiseand a value.