2021-10-14 17:31:30 +00:00
# NuxtApp
2021-11-21 12:31:44 +00:00
In Nuxt 3, you can access runtime app context within composables, components and plugins.
2021-10-14 17:31:30 +00:00
2021-11-21 12:31:44 +00:00
In Nuxt 2, this was referred to as [Nuxt context ](https://nuxtjs.org/docs/internals-glossary/context#the-context ).
2021-10-14 17:31:30 +00:00
## Accessing NuxtApp
Within composables, plugins and components you can access `nuxtApp` with `useNuxtApp` :
```js
import { useNuxtApp } from '#app'
function useMyComposable () {
const nuxtApp = useNuxtApp()
// access runtime nuxt app instance
}
```
Plugins also receive `nuxtApp` as the first argument for convenience. [Read more about plugins. ](/docs/directory-structure/plugins )
2021-11-15 13:13:00 +00:00
::alert{icon=👉}
2021-11-21 12:31:44 +00:00
**`useNuxtApp` (on server side) only works during `setup` , inside Nuxt plugins or `Lifecycle Hooks` **.
2021-11-15 13:13:00 +00:00
::
2021-10-14 17:31:30 +00:00
## Providing helpers
2021-11-21 12:31:44 +00:00
You can provide helpers to be usable across all composables and application. This usually happens within a Nuxt plugin.
2021-10-14 17:31:30 +00:00
```js
const nuxtApp = useNuxtApp()
nuxtApp.provide('hello', (name) => `Hello ${name}!` )
console.log(nuxtApp.$hello('name')) // Prints "Hello name!"
```
2021-11-21 12:31:44 +00:00
In Nuxt 2 plugins, this was referred to as [inject function ](https://nuxtjs.org/docs/directory-structure/plugins#inject-in-root--context ).
2021-10-14 17:31:30 +00:00
2021-11-18 13:11:34 +00:00
::alert{icon=👉}
It is possible to inject helpers by returning an object with a `provide` key. See the [plugins documentation ](/docs/directory-structure/plugins ) for more information.
::