「Nuxt 3」の新機能を体験してみよう――環境作成からVue 3の新機能活用・Nuxt Bridgeの利用方法まで

JavaScriptフレームワーク「Vue 3」と「Nuxt 3」の活用 第1回

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ツールをダウンロードしてそのまま実行するコマンドです。

［リスト1］Nuxt 3プロジェクトを生成するコマンド

npx nuxi init <プロジェクト名>

　リスト1のコマンドを実行すると、プロジェクト名に指定した名前のフォルダー内にプロジェクトのファイルが生成されます。

図6　CLIツールで生成したNuxt 3のプロジェクト内容（p001-nuxt3-plain）

　各ファイルの役割を表1に示します。Webページの内容はapp.vueファイルに記述します。

表1　Nuxt 3プロジェクトに含まれるファイル（p001-nuxt3-plain）

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 />コンポーネントが表示しています。

［リスト2］Nuxt 3プロジェクト生成直後のapp.vue（p001-nuxt3-plain/app.vue）

<template>
  <div>
    <NuxtWelcome />
  </div>
</template>