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

Nuxtインターフェース

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

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

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

詳細については、ソースコードを確認してください。

NuxtAppインターフェース

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

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

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

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

このインターフェースについての詳細は、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モジュールを使用してビルドコンテキストを拡張し、Nuxtプラグインを使用してランタイムを拡張できます。

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