はじめに
Nuxt.jsは、Webページのユーザーインタフェース（UI）を構築できるVue.jsとともに、さまざまな追加機能をまとめて提供するフレームワークです。Nuxt.jsの現在の安定版はバージョン2（Nuxt 2）ですが、次期バージョンとなる「Nuxt 3」が開発中で、記事執筆時点ではベータ版が提供されています。
図1 Nuxt 3の公式ページ
本連載では、Nuxt 3の新機能を中心に、サンプルを交えてNuxt 3の活用方法を説明していきます。初回となる本記事では、Nuxt 3の主な変更点を説明するとともに、Nuxt 3のプロジェクトを生成して動作させ、簡単な実装を行います。また、従来のNuxt 2で作られたプロジェクトにNuxt 3の機能を導入する「Nuxt Bridge」を適用する方法も紹介します。
対象読者
- Nuxt.jsでVue.jsの最新機能を使いたい方
- 従来のNuxt.jsで作成したプロジェクトを利用している方
- これを機会に最新のNuxt.jsの利用法を学びたい方
必要な環境
本記事のサンプルコードは、以下の環境で動作を確認しています。
-
Windows 10 64bit版
- Node.js 16.13.1 64bit版
- Nuxt.js（Nuxt 3） 3.0.0（ベータ版）
- Nuxt.js（Nuxt 2） 2.15.8
- Microsoft Edge 96.0.1054.62
サンプルコードはNuxt 3またはNuxt 2のCLIツールで生成したものです（詳細は後述）。サンプルコードを開発モードで実行するには、サンプルのフォルダーで「npm install」コマンドを実行してライブラリーをダウンロード後、「npm run dev」コマンドを実行して、Webブラウザーで「http://localhost:3000/」を開きます。
Nuxt 3で新しくなるポイント
まず、Nuxt 3の主な変更点について、以下で説明します。
Vue.jsがVue 3にアップデート
Nuxt.jsでは、WebページのUI構築にVue.jsを利用します。Nuxt 2では標準でVue.jsのバージョン2（Vue 2）を利用していましたが、Nuxt 3ではVue.jsの最新版となるバージョン3（Vue 3）を利用します。
図2 Vue 3の公式ページ
そのため、Nuxt 3では、コンポーネントの新しい記述方法であるComposition APIや、コンポーネント表示を遅延させるSuspenseといった、Vue 3の新機能を活用できます。Composition APIについては過去記事1、それ以外のVue 3新機能については過去記事2も参考にしてください。
TypeScript、ES Moduleへの対応
TypeScriptは、JavaScriptでデータの型を利用できる拡張言語で、コンパイルしてJavaScriptにする、いわゆるAltJSの一つです。最近のJavaScriptフレームワークではTypeScriptの利用が広がっており、Vue.jsもVue 3自体がTypeScriptで開発されています。この流れを受けて、Nuxt 3でもTypeScriptが標準でサポートされます。あわせて、モジュールを作成・参照する際に、標準で定義されたECMAScript Module（ES Module）を利用するようになりました。
より高速に動作するバンドラーであるViteやサーバーエンジンのNitro
実行時にJavaScriptコードをまとめるバンドラーには、従来利用されていたwebpackの他に、高速動作を特徴とするViteが選択できるようになりました。また、サーバーエンジンには、より高速・軽量で、Nuxt内部でのAPI作成にも対応したNitroを利用します。なお、Viteについてはこちらの過去記事も参照してください。
Nuxt 3の開発をサポートする新しいCLIツール
Nuxt 2で利用されていた「create-nuxt-app」に代わり、Nuxt 3では「nuxi」CLIツールが提供されます。nuxiでは、Nuxt 3プロジェクトの新規作成や実行などが行えます。
Nuxt 2のプロジェクトでNuxt 3の新機能が利用できるNuxt Bridge
Nuxt 3では多くの機能追加が行われ、従来のNuxt 2との差異が大きいです。そのため、Nuxt 2で作成されたプロジェクトを直接的にNuxt 3にアップグレードする代わりに、Nuxt 2のプロジェクトにNuxt 3の機能（の一部）を追加できる「Nuxt Bridge」が提供されます。Nuxt Bridgeを利用すると、Nuxt 2プロジェクトのコードを大幅に修正することなく、Nuxt 3の機能が利用できます。ただし、Nuxt Bridgeを適用したNuxt 2プロジェクトは、Nuxt 3のプロジェクトと完全に同一になるわけではない点に注意が必要です。公式ドキュメントでの比較（下図）では、例えばTypeScriptやCompositon API、Viteなどのサポートが一部限定的であることがわかります。
図3 Nuxt 2、Nuxt Bridge、Nuxt 3の違い（公式ページより）
