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

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

Nuxt Bridgeを利用してNuxt 2のプロジェクトにNuxt 3の機能を導入

　Nuxt 2プロジェクトでNuxt 3の機能を利用するには、前述の通りNuxt Bridgeを利用します。ここではCLIツールで生成したNuxt 2プロジェクトを利用して、Nuxt Bridgeの設定方法を説明します。

　Nuxt 2プロジェクトを生成するには、リスト4のコマンドを実行します。実行後、コマンドライン上で対話的にプロジェクト内容を設定できます。詳細はこちらの過去記事を参照してください。ここではTypeScriptを有効にして、パッケージマネージャーはnpmを指定します。生成したプロジェクトをサンプルコード（p003-nuxt2）に含めています。

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

npx create-nuxt-app <プロジェクト名>

　それでは、生成したNuxt 2のプロジェクトに、Nuxt Bridgeを導入していきます。Nuxt Bridge導入後のプロジェクトをサンプルコード（p004-nuxt2-bridge）に含めています。

　導入は公式ページで案内されている方法に従って行います。まず、package.jsonで記述されているnuxtライブラリーの参照を、最新版のnuxt-edgeに変更します（リスト5）。変更後はpackage-lock.jsonの削除、「npm install」コマンド実行を行い、ライブラリーを再インストールします。

［リスト5］参照するNuxtを最新版に変更する記述（p004-nuxt2-bridge/package.json）

"dependencies": {
//"nuxt": "^2.15.8",     // 元の記述はこちら
  "nuxt-edge": "latest", // このように変更
（略）
},

　リスト6のコマンドでNuxt Bridgeのパッケージをインストールします。「-D」は「--save-dev」と同じ意味のオプションで、この指定によりNuxt Bridgeが開発用のライブラリーとしてインストールされます。

［リスト6］Nuxt Bridgeをインストールするコマンド

npm install -D @nuxt/bridge@npm:@nuxt/bridge-edge

　package.jsonに記述されているコマンドの定義を変更します。もともとの定義はリスト7の通りです。

［リスト7］Nuxt 2プロジェクトのコマンド定義（p003-nuxt2/package.json）

"scripts": {
  "dev": "nuxt",
  "build": "nuxt build",
  "start": "nuxt start",
  "generate": "nuxt generate"
},

　これをリスト8の通りに変更して、Nuxt 3のCLIツールnuxiを利用するようにします。

［リスト8］Nuxt Bridgeを利用するコマンド定義（p004-nuxt2-bridge/package.json）

"scripts": {
  "dev": "nuxi dev",
  "build": "nuxi build",
  "start": "nuxi start",
  "generate": "nuxi generate"
},

　Nuxtの設定ファイルnuxt.configの記述を変更します。変更前はリスト9の通りになっています。

［リスト9］Nuxt 2プロジェクトのNuxt設定ファイル（p003-nuxt2/nuxt.config.js）

export default {
（略）
}

　これをリスト10の通り、Nuxt Bridgeが提供するdefineNuxtComponentメソッドで囲むようにします。

［リスト10］Nuxt Bridgeを利用するNuxt設定ファイル（p004-nuxt2-bridge/nuxt.config.js）

import { defineNuxtConfig } from '@nuxt/bridge'
export default defineNuxtConfig({
（略）
})

　Nuxt 2プロジェクトがTypeScriptを利用している場合、その設定ファイルtsconfig.jsonにリスト11の記述を追加します。

［リスト11］Nuxt Bridgeを利用するTypeScript設定ファイル（p004-nuxt2-bridge/tsconfig.json）

{
  "extends": "./.nuxt/tsconfig.json", // この行を追加
  "compilerOptions": {
（以下略）

　不必要なモジュールの定義を削除します。不必要なモジュールの詳細は公式ページに記述されています。今回はまずpackage.jsonのdevDependenciesに存在する「"@nuxt/typescript-build"」を削除します。

［リスト12］@nuxt/typescript-buildパッケージを削除（p004-nuxt2-bridge/package.json）

"devDependencies": {
  "@nuxt/typescript-build": "^2.1.0" // この行を削除
}

　また、このモジュールを参照しているnuxt.config.jsの記述も削除します。

［リスト13］@nuxt/typescript-buildを参照する記述を削除（p004-nuxt2-bridge/nuxt.config.js）

buildModules: [
  '@nuxt/typescript-build', // この行を削除
],

　.gitignoreに、Nuxt Bridgeでファイルが生成されるフォルダー「.output」を追加して、このフォルダーがGitにコミットされないようにします。

［リスト14］.outputをGitにコミットしないように設定（p004-nuxt2-bridge/.gitignore）

# Nuxt Bridgeでファイルが生成されるフォルダー
.output

　以上でNuxt Bridgeの設定が完了しました。完了後、Nuxt 3プロジェクトでComposition APIを利用して実装したリスト3の内容を、そのままpages/index.vueファイルに貼り付けて実行させると、Nuxt 3プロジェクトと同一内容（図7）が表示され、Nuxt BridgeによってComposition APIが利用できるようになったことが確認できます。

[補足]Nuxt BridgeプロジェクトでViteを利用

　Nuxt Bridgeを設定したNuxt 2のプロジェクトでは、デフォルトではバンドラーとしてwebpackが利用されます。Viteを利用するには、nuxt.config.jsにbridge要素を追加して、リスト15の通り記述します。ただし、現状でNuxt BridgeでのViteの利用は実験的な機能であることに注意してください。

［リスト15］Nuxt BridgeでViteを利用する記述（p004-nuxt2-bridge/nuxt.config.json）

export default defineNuxtConfig({
（略）
  bridge: {
    vite: true // viteを使用
  }
})

　bridge要素には、vite以外にもNuxt Brigeが提供する各種機能を有効／無効にするフラグを設定できます。詳細は公式ページを参照してください。

　なお、「bridge: false」と、bridge要素にfalseを設定すると、Nuxt Bridge自体を無効にできます。

まとめ

　本記事では、JavaScriptフレームワークNuxt.jsの次期バージョン「Nuxt 3」について、変更点の概要を紹介するとともに、簡単なプロジェクトを利用して動作を確認しました。また「Nuxt Bridge」を利用して、Nuxt 2のプロジェクトにNuxt 3の一部機能を追加する方法を、サンプルとともに説明しました。

　次回は、Nuxt 3で追加された新機能を中心に、Nuxt 3の利用法を紹介していきます。

参考資料

• Nuxt 3
• Vue 3