プロジェクト作成に関する変更
Nuxtのバージョン3.1から4.3の中で、一番インパクトのある変更は、プロジェクトの作成に関する変更です。そこから話を始めていきます。
プロジェクト作成ツールの改善
まず、バージョン3.16で、プロジェクト作成のコマンドが変更になっています。Nuxtプロジェクトを作成する場合、3.15までは、npx nuxi initコマンドを利用していました。これが、3.16以降、以下のコマンドに変更になっています（※）。
npm create nuxt プロジェクト名
※npm以外にも、yarn、pnpm、bun、denoコマンドでもプロジェクトは作成可能です。詳細は、公式ドキュメントを参照してください。
このコマンドを実行すると図1のように表示され、プロジェクト作成ウィザードが実行されます。
その後、いくつか質問に答えることで適切なプロジェクトが作成されるようになります。以下、原稿執筆時点で確認できた質問を記載していきます。
1. Which template would you like to use?
プロジェクトのテンプレートを選択します（図2）。選択肢としては、表1のものがあります。
| 選択肢 | 英語表記の内容 | 内容 |
|---|---|---|
| content | Content-driven website | Nuxt Contentを利用したプロジェクト |
| minimal | Minimal setup for Nuxt 4 | 推奨選択肢である最小限の構成のプロジェクト |
| module | Nuxt module | Nuxtモジュールを作成するためのプロジェクト |
| ui | App using Nuxt UI | Nuxt UIを利用したプロジェクト |
実は、この質問を選択した時点でプロジェクトは作成されており、コンソールには以下のように表示されます。
◇ Creating project in first-nuxt │ ◇ Downloaded minimal template
ここからは、必要なライブラリのダウンロードやプロジェクトへの設定の質問が続きます。
2. Which package manager would you like to use?
利用するパッケージマネージャを選択します。選択肢としては図3のものがあります。基本的には、最初のプロジェクト作成コマンドと同一のものがcurrentとして選択されています。
3. Initialize git repository?
Gitリポジトリを作成するかの質問で、Yes/Noから選択します。
この質問に回答するとコンソールには以下のように表示され、依存パッケージのダウンロードが行われます。ダウンロードが終了すると、次の質問に移ります。
Installing dependencies with npm
4. Would you like to install any of the official modules?
Nuxt公式モジュールを追加でインストールするかどうかの質問で、Yes/Noから選択します。Noの場合はプロジェクト作成が完了します。
一方、Yesを選択すると図4の追加モジュールの選択肢が表示され、モジュールが追加できるようになっています。なお、主なモジュールを、表2にまとめておきます。
| モジュール | 英語表記の内容 | 内容 |
|---|---|---|
| @nuxt/content | The file-based CMS with support for Markdown, YAML, JSON | NuxtをCMSのように利用できるNuxt Content |
| @nuxt/eslint | Project-aware, easy-to-use, extensible and future-proof ESLint integration | Nuxt用のESLint |
| @nuxt/test-utils | Test utilities for Nuxt | Nuxtでテストを行うためのモジュール |
| @nuxt/ui | The Intuitive UI Library powered by Reka UI and Tailwind CSS | UI作成を効率よく行うためのモジュールであるNuxt UI |
新しくなったプロジェクト構成
このように作成したプロジェクトに関して、プロジェクト内のフォルダ構成についてもバージョン4.0で変更になっています。
一番大きな変更は、appフォルダの導入です。図5は、バージョン4.0リリースのアナウンス記事に記載されているプロジェクトフォルダ構成図のキャプチャです。
バージョン3系では、assetsフォルダやcomponentsなどのフォルダは、プロジェクトフォルダ直下に作成していました。これが、プロジェクト直下のサブフォルダであるapp内に配置されるようになっています。
これにより、アプリの動作に直接必要なフォルダと、.gitやnode_modulesなど、間接的に必要なフォルダが混在した状態が解消されたことになります。
