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

78 lines
2.2 KiB
Markdown
Raw Normal View History

# NuxtApp
2021-11-21 12:31:44 +00:00
In Nuxt 3, you can access runtime app context within composables, components and plugins.
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).
## 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
::
## 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.
```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).
::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.
::
## 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)
```js
const nuxtApp = {
vueApp, // 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).