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.

Nuxt App Interface

Jump over the NuxtApp interface documentation.

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

composables/useMyComposable.ts

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

Plugins also receive nuxtApp as the first argument for convenience.

Read more in Docs > Guide > Directory Structure > Plugins.

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!"

It is possible to inject helpers by returning an object with a provide key in plugins.

In Nuxt 2 plugins, this was referred to as inject function.

Nuxt Kit

@nuxt/kit provides features for module authors.

Authoring Nuxt Layers

Nuxt provides a powerful system that allows you to extend the default files, configs, and much more.