Vueベースのフレームワーク「Nuxt 4.3」までの大きな変更点──開発ツールとデータ取得

【最新Nuxtアップデート解説】Nuxtの変更点まとめ 第1回

プロジェクト作成に関する変更

　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：プロジェクト作成コマンドを実行した際のコンソール表示

　その後、いくつか質問に答えることで適切なプロジェクトが作成されるようになります。以下、原稿執筆時点で確認できた質問を記載していきます。

1. Which template would you like to use?

　プロジェクトのテンプレートを選択します（図2）。選択肢としては、表1のものがあります。

図2：プロジェクト作成時の質問1

表1：プロジェクト作成時の質問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：プロジェクト作成時の質問2

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にまとめておきます。

図4：モジュール追加の選択肢

表2：プロジェクト作成時の質問4で追加できる主なモジュール

モジュール	英語表記の内容	内容
@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リリースのアナウンス記事に記載されているプロジェクトフォルダ構成図のキャプチャです。

図5：Nuxt4でのプロジェクト構成

　バージョン3系では、assetsフォルダやcomponentsなどのフォルダは、プロジェクトフォルダ直下に作成していました。これが、プロジェクト直下のサブフォルダであるapp内に配置されるようになっています。

　これにより、アプリの動作に直接必要なフォルダと、.gitやnode_modulesなど、間接的に必要なフォルダが混在した状態が解消されたことになります。