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

Accessing NuxtApp

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

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.

::alert{icon=👉} useNuxtApp (on server side) 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. ::

NuxtApp interface (advanced)

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

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.