Nuxt の動作原理

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

Nuxt インターフェース

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

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

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

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

NuxtApp インターフェース

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

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

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

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

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

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

const nuxtApp = {
  vueApp, // the global Vue application: https://vuejs.org/api/application.html#application-api

  versions, // an object containing Nuxt and Vue versions

  // These let you call and add runtime NuxtApp hooks
  // https://github.com/nuxt/nuxt/blob/main/packages/nuxt/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
}

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

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

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

どちらの領域も拡張できますが、ランタイムコンテキストはビルド時とは隔離されています。 したがって、ランタイム設定以外に状態、コード、またはコンテキストを共有することは想定されていません。

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

本番アプリケーションをビルドする場合、nuxi build は .output ディレクトリに、nuxt.config および Nuxt モジュール から独立したスタンドアロンビルドを生成します。