NuxtApp

Nuxt 3では、コンポーザブル、コンポーネント、プラグイン内でランタイムアプリコンテキストにアクセスできます。

Nuxtアプリインターフェース

Nuxtコンテキスト

組み込みとユーザー作成の両方を含む、多くのコンポーザブルとユーティリティは、Nuxtインスタンスへのアクセスが必要になる場合があります。リクエストごとに新しいインスタンスが作成されるため、これはアプリケーションのどこにも存在しません。

現在、Nuxtコンテキストは、プラグイン、Nuxtフック、Nuxtミドルウェア、およびsetup関数（ページとコンポーネント内）でのみアクセスできます。

コンテキストにアクセスせずにコンポーザブルが呼び出されると、「Nuxtインスタンスへのアクセスが必要なコンポーザブルが、プラグイン、Nuxtフック、Nuxtミドルウェア、またはVue setup関数の外部で呼び出されました」というエラーが発生する場合があります。その場合は、nuxtApp.runWithContextを使用して、このコンテキスト内で関数を明示的に呼び出すこともできます。

NuxtAppへのアクセス

コンポーザブル、プラグイン、コンポーネント内では、useNuxtApp()を使用してnuxtAppにアクセスできます。

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

コンポーザブルが常にnuxtAppを必要としない場合、または、useNuxtAppが例外をスローするため、単に存在するかどうかを確認したい場合は、代わりにtryUseNuxtAppを使用できます。

プラグインは、便宜上、最初の引数としてnuxtAppも受け取ります。

ヘルパーの提供

すべてのコンポーザブルとアプリケーション全体で使用できるようにヘルパーを提供できます。これは通常、Nuxtプラグイン内で行われます。

const nuxtApp = useNuxtApp()
nuxtApp.provide('hello', (name) => `Hello ${name}!`)

console.log(nuxtApp.$hello('name')) // Prints "Hello name!"