callOnce · Nuxt Utils

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>

callOnce is useful in combination with the Pinia module to call store actions.

Read more in Docs > Getting Started > State Management.

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 of callOnce will be generated for you.
fn: The function to run once. This function can also return a Promise and a value.

addRouteMiddleware

addRouteMiddleware() is a helper function to dynamically add middleware in your application.

clearError

The clearError composable clears all handled errors.