🔎

Nuxt3のアプリケーションにアクセスした時にファイルが読み込まれる順番は?

2025/01/13に公開

あまり気にすることはないと思いますが、Nuxtで作成したアプリケーションにアクセスした時、ディレクトリやファイルはどのような順番で読み込みが行われて最終的にブラウザに表示されるのでしょうか?

公式のWEBサイトを確認してもそのような記載は特になく...今回は実際に読み込まれる順番を確認したので順番について解説していきます。
⚠️確認したNuxtのバージョンは3.14.xでssrを使用していない状態になります

ファイル読み込み順

1.nuxt.config.ts

このファイルはアクセスした時に読み込まれるものではなく、アプリケーションサーバーを起動したタイミングで読み込まれるものになります。ここでアプリケーション全体の設定ファイルが読み込まれミドルウェア、プラグイン、ルーティング、ビルド設定などの情報を取得します。環境変数の読み込みもここで行われます。(.envやruntimeConfigなど)

2.server/middleware

BFFを使用しているなら、serverディレクトリに指定したmiddlewareを読み込みます。このディレクトリ配下にあるファイルの読み込み順はアルファベット順に読み込みます。そのためファイル名に番号を振ることで明示的に順番に読み込むことが可能になります。

3.plugins/

次はpluginsディレクトリ内のファイルが読み込まれます。こちらもこのディレクトリ配下にあるファイルの読み込み順はアルファベット順に読み込みます。
defineNuxtPlugin内に記述しないと読み込まないのは注意が必要です。

4.middleware

ページコンポーネントに到達する前にmiddlewareが読み込みまれます。こちらもこのディレクトリ配下にあるファイルの読み込み順はアルファベット順に読み込みます。

5.app.vue > pages/ > components/

ここから実際にブラウザにレンダリングするファイルをを読み込んでいきます。
こちらは、実際に記述して作成していくので感覚的に理解できるかと思います。

6.composables/

こちらは定義した関数は自動的にグローバルに利用可能になりますが、アプリケーションの初期化時に一括で読み込まれるわけではなく、必要なときに動的に読み込まれる仕組みです。


基本的には気にせず開発を行うことはできると思いますが、いざとなったときに役立つ知識かと思うのでぜひ、頭の隅に置いておきましょう!

株式会社find | 落とし物クラウド

Discussion