Nuxt はどのように動作するのか？

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

Nuxt インターフェース

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

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

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

詳細については、ソースコード.

NuxtApp インターフェース

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

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

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

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

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

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

interface 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
}

詳細については、ソースコード.

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

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

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

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

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