最終更新日: 2023年08月15日

Nuxt はどのように機能するのか?

Nuxt は、Web アプリケーションを構築するための最小限だが高度にカスタマイズ可能なフレームワークです。 このガイドは、Nuxt の内部をより深く理解し、Nuxt 上で新しいソリューションやモジュール統合を開発するのに役立ちます。

Nuxt インターフェース

nuxi devを使用して開発モードでNuxtを起動するか、nuxi buildを使用して実稼働アプリケーションを構築すると、内部的にnuxtと呼ばれる共通コンテキストが作成されます。 これには、nuxt.configファイルとマージされた正規化されたオプション、いくつかの内部状態、およびさまざまなコンポーネントが相互に通信できるようにするunjs/hookableを利用した強力なフッキング システムを利用することができます。これは、ビルドのコアシステムです。

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

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

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

NuxtApp インターフェース

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

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

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

Nuxt Appには、このインターフェースに関する詳細な情報があります。

nuxtAppは次のプロパティを持っています：

  • ts
const nuxtApp = {
  vueApp, // the global Vue application: 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
}

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

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

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

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

本番向けにアプリケーションをビルドする際、nuxi buildは.outputディレクトリにスタンドアロンのビルドを生成します。このビルドはnuxt.configやNuxtモジュールに依存しないものです。