Nuxt/docs/content/1.docs/2.guide/4.going-further/6.nuxt-app.md
Sébastien Chopin 90784f79d7
docs: new website design (#9007)
* docs: implement new website theme

* chore: rename dirs

* chore: update build

* lint fix

* chore: update deps

* fix: include node_modules in esbuild step

* chore: update deps

* Update .gitignore

* chore: update theme version

* up

* up

* fix: use svg for illustration

* chore: update to 0.0.12

* chore: force parse5 resolution

* stay with build

* feat: always display first home section

* Update yarn.lock

* chore: update theme

* fix lint

* docs: update home title

* chore: update website theme version

* Update docs/content/0.index.md

Co-authored-by: pooya parsa <pyapar@gmail.com>

* Update docs/content/0.index.md

Co-authored-by: pooya parsa <pyapar@gmail.com>

* up

* chore: bump theme version

* up

* chore: up

* up up and up

* chore: generate

* fix: boolean value

* feat: new images

* update again

* chore: up

* ouep

* chore: up

Co-authored-by: Daniel Roe <daniel@roe.dev>
Co-authored-by: Clément Ollivier <clement.o2p@gmail.com>
Co-authored-by: pooya parsa <pyapar@gmail.com>
2022-11-16 11:04:28 +01:00

1.4 KiB

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

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.

Accessing NuxtApp

Within composables, plugins and components you can access nuxtApp with useNuxtApp:

function useMyComposable () {
  const nuxtApp = useNuxtApp()
  // access runtime nuxt app instance
}

Plugins also receive nuxtApp as the first argument for convenience. Read more about plugins.

::alert{icon=👉} useNuxtApp (on the server) only works during setup, inside Nuxt plugins or Lifecycle Hooks. ::

Providing Helpers

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

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.

::alert{icon=👉} It is possible to inject helpers by returning an object with a provide key. See the plugins documentation for more information. ::