Vue

Vue.jsベースのフルスタックフレームワークとして広く採用されているNuxtが、2025年7月15日にバージョン4.0をリリースしました。約1年のテスト期間を経た安定性重視のメジャーアップデートであり、開発体験（DX）の向上に重点が置かれています。 Nuxt 4の中心的な設計方針は「Nuxt 3からの移行をスムーズにしつつ、プロジェクト構造・型安全性・パフォーマンスを底上げする」ことです。多くの破壊的変更はNuxt 3.xの段階で互換フラグとしてテストできる状態が1年以上続いていたため、段階的に対応できます。 ここでは、v4.0からv4.3までに導入された主要な機能変更を体系的に整理し、Nuxt 3プロジェクトからの移行判断に必要な情報をまとめています。 app/ディレクトリを軸にしたプロジェクト構成の再設計 Nuxt 4で最も目立つ変更が、プロジェクトのソースコードをapp/ディレクトリに集約する構成への移行です。 Nuxt 3ではcomponents/、pages/、composables/、layouts/などをプロジェクトルート直下に配置していました。Nuxt 4ではこれらをapp/ディレクトリの配下に移動させ、設定ファイルやserver/ディレクトリとアプリケーションコードを明確に分離します。 # Nuxt 3の構成 my-project/ ├── components/ ├── composables/ ├── layouts/ ├── pages/ ├── server/ ├── nuxt.config.ts └── app.vue # Nuxt 4の構成 my-project/ ├── app/ │ ├── components/ │ ├── composables/ │ ├── layouts/ │ ├── pages/ │ └── app.vue ├── server/ ├── shared/ │ └── utils/ └── nuxt.config.ts この変更によって得られる利点は主に3つあります。 関心の分離が明確になる: クライアント寄りのコードと、サーバー側のコード、プロジェクト設定が物理的に分かれるため、大規模プロジェクトでのナビゲーションが容易になります モノレポ構成との親和性: ルート直下にワークスペースの設定ファイルを置いても、アプリケーションコードと混在しません shared/ディレクトリによるコード共有: 後述するshared/ディレクトリと合わせて、サーバーとクライアントで共通利用するロジックの管理が整理されます なお、Nuxt 4でもルート直下にソースファイルを置く従来のレイアウトは引き続き動作します。app/ディレクトリが存在しない場合、Nuxt 4は自動的にルート直下をソースディレクトリとして認識します。 ...