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. ::

Accessing NuxtApp

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

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

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. ::