このガイドは、Nuxt の内部をよりよく理解し、Nuxt 上で新しいソリューションやモジュール統合を開発するのに役立ちます。

Nuxt インターフェース

nuxt dev で開発モードで Nuxt を開始するか、nuxt build で本番アプリケーションをビルドすると、nuxt として内部で参照される共通のコンテキストが作成されます。これは、nuxt.config ファイルとマージされた正規化されたオプション、いくつかの内部状態、および unjs/hookable によって強化された強力なフックシステムを保持し、異なるコンポーネントが互いに通信できるようにします。これを Builder Core と考えることができます。

このコンテキストは、Nuxt Kit のコンポーザブルで使用するためにグローバルに利用可能です。そのため、プロセスごとに Nuxt のインスタンスは一つだけ許可されます。

Nuxt インターフェースを拡張し、ビルドプロセスの異なる段階にフックするためには、Nuxt Modules を使用できます。

詳細については、ソースコードをチェックしてください。

NuxtApp インターフェース

ブラウザまたはサーバーでページをレンダリングする際に、nuxtApp として参照される共有コンテキストが作成されます。このコンテキストは、Vue インスタンス、ランタイムフック、ssrContext やハイドレーション用のペイロードなどの内部状態を保持します。これを Runtime Core と考えることができます。

このコンテキストは、Nuxt プラグインや <script setup>、Vue のコンポーザブル内で useNuxtApp() コンポーザブルを使用してアクセスできます。グローバルな使用はブラウザでは可能ですが、サーバーではユーザー間でコンテキストを共有しないようにするためにできません。

useNuxtApp はコンテキストが現在利用できない場合に例外を投げるため、コンポーザブルが常に nuxtApp を必要としない場合は、例外を投げる代わりに null を返す tryUseNuxtApp を使用できます。

nuxtApp インターフェースを拡張し、異なる段階にフックしたりコンテキストにアクセスするためには、Nuxt Plugins を使用できます。

このインターフェースについての詳細は、Nuxt App を参照してください。

nuxtApp には以下のプロパティがあります：

const nuxtApp = {
  vueApp, // グローバルな Vue アプリケーション: https://vuejs.org/api/application.html#application-api

  versions, // Nuxt と Vue のバージョンを含むオブジェクト

  // これらはランタイム NuxtApp フックを呼び出したり追加したりするためのものです
  // https://github.com/nuxt/nuxt/blob/main/packages/nuxt/src/app/nuxt.ts#L18
  hooks,
  hook,
  callHook,

  // サーバーサイドでのみアクセス可能
  ssrContext: {
    url,
    req,
    res,
    runtimeConfig,
    noSSR,
  },

  // これは文字列化され、サーバーからクライアントに渡されます
  payload: {
    serverRendered: true,
    data: {},
    state: {}
  }

  provide: (name: string, value: any) => void
}

詳細については、ソースコードをチェックしてください。

ランタイムコンテキスト vs. ビルドコンテキスト

Nuxt は Node.js を使用してプロジェクトをビルドおよびバンドルしますが、ランタイム側も持っています。

両方の領域を拡張することができますが、そのランタイムコンテキストはビルド時から分離されています。そのため、ランタイム設定以外の状態、コード、コンテキストを共有することは想定されていません！

nuxt.config と Nuxt Modules はビルドコンテキストを拡張するために使用でき、Nuxt Plugins はランタイムを拡張するために使用できます。

本番用のアプリケーションをビルドする際、nuxt build は .output ディレクトリにスタンドアロンのビルドを生成し、nuxt.config や Nuxt modules から独立しています。