Nuxt 3プロジェクトを生成し、動かしてみる
以下では、Nuxt 3への入門として、CLIツールnuxiを利用してNuxt 3のプロジェクトを生成し、そのまま動作させてみます。動作させると下図のWebページが表示されます。
図4 CLIツールで生成したNuxt 3のプロジェクトの実行結果（p001-nuxt3-plain）
最初に、開発環境を用意します。公式ドキュメントでは、以下の環境を推奨しています。
- Node.js（LTS版の最新バージョン）
- Visual Studio Code
- Volar（Visual Studio CodeでVue.jsの開発をサポートする拡張機能）
Volarは、Visual Studio Codeの画面で検索してインストールできます。
図5 Volar拡張機能をVisual Studio Codeにインストールする手順
プロジェクトを生成するには、コマンドプロンプトまたはPowerShellでリスト1のコマンドを実行します。npxは、最新のCLIツールをダウンロードしてそのまま実行するコマンドです。
npx nuxi init <プロジェクト名>
リスト1のコマンドを実行すると、プロジェクト名に指定した名前のフォルダー内にプロジェクトのファイルが生成されます。
図6 CLIツールで生成したNuxt 3のプロジェクト内容（p001-nuxt3-plain）
各ファイルの役割を表1に示します。Webページの内容はapp.vueファイルに記述します。
| No. | ファイル名 | 役割 |
|---|---|---|
| 1 | .gitignore | Gitに登録しないファイルの設定 |
| 2 | app.vue | Webページ（コンポーネント）ファイル |
| 3 | nuxt.config.ts | Nuxt.jsの設定ファイル |
| 4 | package.json | Node.jsプロジェクトの設定ファイル |
| 5 | README.md | プロジェクト説明ドキュメントファイル |
| 6 | tsconfig.json | TypeScriptの設定ファイル |
[補足]Nuxt 3プロジェクトにはデフォルトでページ切り替え機能が含まれない
Nuxt 2ではプロジェクト生成時に、デフォルトでさまざまなフォルダーが生成されました（詳細は過去記事を参照）。一方でNuxt 3では、プロジェクトで最初に生成されるのは必要最低限のファイルだけです。特に、複数の*.vueファイルを配置して切り替え表示できるようにするpagesフォルダーは、Nuxt 3ではデフォルトで生成されず、また、複数ページを切り替えるために必要となるvue-routerも利用されません。そのため、ページ切り替えが必要ないプロジェクトでは、vue-routerが含まれない分だけ、生成されるファイルを軽量化できます。
Nuxt 3のプロジェクトでも、pagesフォルダーを自分で生成して複数の*.vueファイルを配置すれば、自動的にvue-routerが導入され、Nuxt 2と同様のページ切り替えが利用できるようになります。
このプロジェクトを実行してみます。Nuxt 2までと異なり、プロジェクト生成直後にはライブラリーがダウンロードされないので、最初に明示的に「npm install」コマンドを実行してライブラリーをダウンロードする必要があります。その後「npm run dev」コマンドを実行後、Webブラウザーから「https://localhost:3000/」にアクセスすると、図4の通り表示されます。
プロジェクト生成直後、Webページに対応するapp.vueの内容はリスト2の通りになっています。図4のページ内容は<NuxtWelcome />コンポーネントが表示しています。
<template>
<div>
<NuxtWelcome />
</div>
</template>
