編集

Nuxt 4.0 リリース、app ディレクトリ構造と TypeScript 体験の向上

#Nuxt #TypeScript

Nuxt 4.0 がリリース。1 年間に渡る v4 互換モードでのテストを経た安定性を重視したメジャーリリース。

主要な変更点：

  • app/ディレクトリ構成がデフォルトに変更
  • useAsyncDataとuseFetchの改良
  • TypeScript プロジェクトの分離
  • CLI 高速化と Native file watching 採用

アプリケーションコードがapp/ディレクトリに配置され、node_modules/や.git/から分離される。ファイルウォッチャーが高速化し、IDE がクライアントコードとサーバーコードを識別する。

TypeScript ではアプリコード、サーバーコード、shared/フォルダ、設定用に個別のプロジェクトを作成。プロジェクトルートに 1 つのtsconfig.jsonのみ必要。

推奨アップデート手順は以下のコマンド実行。lockfile 重複除去と Nuxt の依存関係更新を実行する。

bash
npx nuxt upgrade --dedupe

またコードのマイグレーションには Codemod ツールを利用可能。

bash
npx codemod@latest nuxt/4/migration-recipe

Nuxt 3 は 2026 年 1 月まで保守アップデート継続。Nuxt 5 では Nitro v3 と h3 v2 を採用予定。

出展：Announcing Nuxt 4.0

編集