Nuxt/docs/content/3.docs/1.usage/4.nuxt-app.md

# NuxtApp

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

In Nuxt 2, this was referred to as [nuxt context](https://nuxtjs.org/docs/internals-glossary/context#the-context)

## 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)


## Providing helpers

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

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

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

In Nuxt 2 plugins, this was referred to as [inject function](https://nuxtjs.org/docs/directory-structure/plugins#inject-in-root--context)

## NuxtApp interface (advanced)

`nuxtApp` has the following properties: (note: this is an internal interface and some properties might change until stable release)

```js
const nuxtApp = {
  app, // the global Vue application: https://v3.vuejs.org/api/application-api.html

  // These let you call and add runtime NuxtApp hooks
  // https://github.com/nuxt/framework/blob/main/packages/nuxt3/src/app/nuxt.ts#L18
  hooks,
  hook,
  callHook,

  // Only accessible on server-side
  ssrContext: {
    url,
    req,
    res,
    runtimeConfig,
    noSSR,
  },

  // This will be stringified and passed from server to client
  payload: {
    serverRendered: true,
    data: {},
    state: {}
  }

  provide: (name: string, value: any) => void
}
```

For more information, check out [the source code](https://github.com/nuxt/framework/blob/main/packages/nuxt3/src/app/nuxt.ts#L28-L53).