2021-10-14 17:31:30 +00:00
|
|
|
# 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)
|
|
|
|
|
2021-11-15 13:13:00 +00:00
|
|
|
::alert{icon=👉}
|
|
|
|
**`useNuxtApp` (on server side) only works during `setup`, inside Nuxt plugins or `Lifecycle Hooks`**
|
|
|
|
::
|
|
|
|
|
2021-10-14 17:31:30 +00:00
|
|
|
## 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)
|
|
|
|
|
2021-10-15 10:14:17 +00:00
|
|
|
`nuxtApp` has the following properties: (note: this is an internal interface and some properties might change until stable release)
|
2021-10-14 17:31:30 +00:00
|
|
|
|
|
|
|
```js
|
|
|
|
const nuxtApp = {
|
2021-10-20 13:33:33 +00:00
|
|
|
vueApp, // the global Vue application: https://v3.vuejs.org/api/application-api.html
|
2021-10-14 17:31:30 +00:00
|
|
|
|
|
|
|
// 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).
|