2022-10-06 09:15:30 +00:00
---
title: "NuxtApp"
description: "In Nuxt 3, you can access runtime app context within composables, components and plugins."
2023-10-18 10:59:43 +00:00
links:
- label: Source
icon: i-simple-icons-github
to: https://github.com/nuxt/nuxt/blob/main/packages/nuxt/src/app/nuxt.ts
2022-10-06 09:15:30 +00:00
---
2021-10-14 17:31:30 +00:00
2023-10-18 10:59:43 +00:00
In Nuxt 3, you can access runtime app context within composables, components and plugins.
2021-10-14 17:31:30 +00:00
2023-10-18 10:59:43 +00:00
::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.
::
2021-10-14 17:31:30 +00:00
## Accessing NuxtApp
2023-10-18 10:59:43 +00:00
Within composables, plugins and components you can access `nuxtApp` with [`useNuxtApp()` ](/docs/api/composables/use-nuxt-app ):
2021-10-14 17:31:30 +00:00
2023-10-18 10:59:43 +00:00
```ts [composables/useMyComposable.ts]
export function useMyComposable () {
2021-10-14 17:31:30 +00:00
const nuxtApp = useNuxtApp()
// access runtime nuxt app instance
}
```
2024-01-18 09:59:59 +00:00
If your composable does not always need `nuxtApp` or you simply want to check if it is present or not, since [`useNuxtApp` ](/docs/api/composables/use-nuxt-app ) throws an exception, you can use [`tryUseNuxtApp` ](/docs/api/composables/use-nuxt-app#tryusenuxtapp ) instead.
2023-10-18 10:59:43 +00:00
Plugins also receive `nuxtApp` as the first argument for convenience.
2021-10-14 17:31:30 +00:00
2023-10-18 10:59:43 +00:00
:read-more{to="/docs/guide/directory-structure/plugins"}
2021-11-15 13:13:00 +00:00
2022-08-13 07:27:04 +00:00
## Providing Helpers
2021-10-14 17:31:30 +00:00
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
2023-10-18 10:59:43 +00:00
```ts
2021-10-14 17:31:30 +00:00
const nuxtApp = useNuxtApp()
nuxtApp.provide('hello', (name) => `Hello ${name}!` )
console.log(nuxtApp.$hello('name')) // Prints "Hello name!"
```
2023-10-18 10:59:43 +00:00
::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.
::
2021-10-14 17:31:30 +00:00
2023-10-18 10:59:43 +00:00
::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** .
2021-11-18 13:11:34 +00:00
::