composables/use-nuxt-app

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.

useNuxtApp composable overview

useNuxtApp is a built-in composable that provides access to the shared runtime context of Nuxt, available on both client and server side but not within Nitro routes. It helps access the Vue app instance, runtime hooks, runtime config variables and internal states such as ssrContext and payload. If runtime context is unavailable, useNuxtApp throws an exception when called.

useNuxtApp basic usage

Call useNuxtApp without parameters to access the Nuxt application context.

useNuxtApp provide method

The provide method accepts name and value parameters. It creates custom properties on nuxtApp that become available across all composables and components via $[name] syntax. Example: nuxtApp.provide('hello', name => `Hello ${name}!`) makes nuxtApp.$hello() available everywhere.

useNuxtApp hook method

The hook method accepts name and cb parameters. It allows hooking into runtime lifecycle at specific points. Hooks are useful for adding custom logic during the rendering lifecycle, primarily used when creating Nuxt plugins. Available runtime hooks can be found in the Runtime Hooks documentation.

useNuxtApp callHook method

The callHook method accepts name and additional args parameters and returns a promise. It is used to call existing hooks with optional arguments.

useNuxtApp vueApp property

vueApp is the global Vue.js application instance accessible through nuxtApp. It provides methods: component() to register or retrieve global components, directive() to register or retrieve global custom directives, and use() to install Vue.js plugins.

useNuxtApp ssrContext property

ssrContext is generated during server-side rendering and only available on the server side. It exposes: url (string) for current request url, event (h3js request event) to access the request and response of the current route, and payload (object) which is the NuxtApp payload object.

useNuxtApp payload property

payload exposes data and state variables from server side to client side. It contains: serverRendered (boolean) indicating if response is server-side-rendered; data (object) containing cached results from useFetch or useAsyncData calls, accessible via payload.data; state (object) containing shared state from useState composable, accessible via payload.state.[name-of-your-state].

useNuxtApp custom payload reducer/reviver

Since Nuxt v3.4, custom reducers and revivers can be defined for unsupported types using payload plugins. definePayloadReducer and definePayloadReviver functions are called with a type identifier string that must match on both reducer and reviver. Reducers serialize data while revivers deserialize it. Example: DateTime class can be serialized to JSON and deserialized back using DateTime.fromISO().

useNuxtApp isHydrating property

isHydrating is a boolean property indicating whether the Nuxt app is currently hydrating on the client side. Useful for checking hydration state in lifecycle hooks.

useNuxtApp runWithContext method

runWithContext is a method that calls a function with an explicit Nuxt context. It accepts a functionWithContext parameter and returns whatever that function returns. Used in complex async/await scenarios in middleware and plugins where context may be lost after async operations, particularly with try/catch blocks.

tryUseNuxtApp composable

tryUseNuxtApp works exactly like useNuxtApp but returns null if context is unavailable instead of throwing an exception. Available since Nuxt v3.10. Use it for composables that do not require nuxtApp or to check if context is available without causing an exception.

Give your agent this brain