onNuxtReady composable purpose
The onNuxtReady composable allows running a callback after your app has finished initializing. It is ideal for running code that should not block the initial rendering of your app.
Nuxt · Getting started · all subjects
initialization & lifecycle
9 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
onNuxtReady runs only on client-side
onNuxtReady only runs on the client-side and does not execute on the server.
onNuxtReady is safe to call after app initialization
It is safe to run onNuxtReady even after your app has already initialized. In this case, the code will be registered to run in the next idle callback.
Example: onNuxtReady for lazy-loading analytics library
export default defineNuxtPlugin(() => { onNuxtReady(async () => { const myAnalyticsLibrary = await import('my-big-analytics-library') // do something with myAnalyticsLibrary }) }) This example shows using onNuxtReady in a client-side plugin to asynchronously import a heavy analytics library after the app has finished initializing.
reloadNuxtApp performs hard reload
reloadNuxtApp performs a hard reload of the page, re-requesting the page and its dependencies from the server.
reloadNuxtApp available in Nuxt 3.3+
reloadNuxtApp is available starting from Nuxt version 3.3.
reloadNuxtApp signature and interface
Function signature: export function reloadNuxtApp (options?: ReloadNuxtAppOptions). Interface ReloadNuxtAppOptions has properties: ttl (number, optional, default 10000), force (boolean, optional, default false), path (string, optional, default window.location.pathname), persistState (boolean, optional, default false).
reloadNuxtApp ttl option prevents reload loops
The ttl option (type: number, default: 10000 milliseconds) specifies the time window in which to ignore future reload requests. If reloadNuxtApp is called again within this time period, it will not reload the app to avoid reload loops.
reloadNuxtApp force option bypasses reload protection
The force option (type: boolean, default: false) allows bypassing reload loop protection entirely, forcing a reload even if one has occurred within the previously specified TTL.