utils/call-once

12 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

callOnce function signature

The callOnce function has two overloads. First overload: callOnce(key?: string, fn?: (() => any | Promise<any>), options?: CallOnceOptions): Promise<void>. Second overload: callOnce(fn?: (() => any | Promise<any>), options?: CallOnceOptions): Promise<void>.

callOnce purpose

The callOnce function is designed to execute a given function or block of code only once during server-side rendering but not hydration, and during 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.

callOnce key parameter

The key parameter is 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 automatically.

callOnce fn parameter

The fn parameter is the function to run once. It can be asynchronous and takes the form (() => any | Promise<any>).

callOnce options parameter

The options parameter accepts a CallOnceOptions object. CallOnceOptions has a mode property of type 'navigation' | 'render', with a default value of 'render'. The mode property controls the execution mode for the callOnce function.

callOnce render mode

The 'render' mode executes the function once during initial render, either during SSR or CSR. This is the default mode.

callOnce navigation mode

The 'navigation' mode executes the function once during initial render and once per subsequent client-side navigation. This mode is available since Nuxt v3.15.

callOnce basic example

Example showing callOnce with default 'render' mode: <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 navigation mode example

Example showing callOnce with 'navigation' mode: <script setup lang="ts">const websiteConfig = useState('config'); await callOnce(async () => { console.log('This will only be logged once and then on every client side navigation'); websiteConfig.value = await $fetch('https://my-cms.com/api/website-config'); }, { mode: 'navigation' });</script>

callOnce does not return anything

callOnce does not return anything. If you want to do data fetching during SSR, you should use useAsyncData or useFetch instead.

callOnce context requirement

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.

callOnce availability

The callOnce utility is available since Nuxt v3.9.

Give your agent this brain