Nuxt/docs/2.guide/3.going-further/6.nuxt-app.md

title	description	links
NuxtApp	In Nuxt 3, you can access runtime app context within composables, components and plugins.	label icon to Source i-simple-icons-github https://github.com/nuxt/nuxt/blob/main/packages/nuxt/src/app/nuxt.ts

In Nuxt 3, you can access runtime app context within composables, components and plugins.

::read-more{to="https://v2.nuxt.com/docs/internals-glossary/context#the-context" target="_blank"} In Nuxt 2, this was referred to as Nuxt context. ::

Nuxt App Interface

::read-more{to="/docs/guide/going-further/internals#the-nuxtapp-interface"} Jump over the NuxtApp interface documentation. ::

The Nuxt Context

Many composables and utilities, both built-in and user-made, may require access to the Nuxt instance. This doesn't exist everywhere on your application, because a fresh instance is created on every request.

Currently, the Nuxt context is only accessible in plugins, Nuxt hooks, Nuxt middleware, and setup functions (in pages and components).

If a composable is called without access to the context, you may get an error stating that 'A composable that requires access to the Nuxt instance was called outside of a plugin, Nuxt hook, Nuxt middleware, or Vue setup function.' In that case, you can also explicitly call functions within this context by using nuxtApp.runWithContext.

Accessing NuxtApp

Within composables, plugins and components you can access nuxtApp with useNuxtApp():

export function useMyComposable () {
  const nuxtApp = useNuxtApp()
  // access runtime nuxt app instance
}

If your composable does not always need nuxtApp or you simply want to check if it is present or not, since useNuxtApp throws an exception, you can use tryUseNuxtApp instead.

Plugins also receive nuxtApp as the first argument for convenience.

:read-more{to="/docs/guide/directory-structure/plugins"}

Providing Helpers

You can provide helpers to be usable across all composables and application. This usually happens within a Nuxt plugin.

const nuxtApp = useNuxtApp()
nuxtApp.provide('hello', (name) => `Hello ${name}!`)

console.log(nuxtApp.$hello('name')) // Prints "Hello name!"

::read-more{to="/docs/guide/directory-structure/plugins#providing-helpers"} It is possible to inject helpers by returning an object with a provide key in plugins. ::

::read-more{to="https://v2.nuxt.com/docs/directory-structure/plugins#inject-in-root--context" target="_blank"} In Nuxt 2 plugins, this was referred to as inject function. ::