Contents
Nuxt 3移行の概要と準備
Nuxt.jsをVue 2からVue 3へ移行する際には、技術的な変更点や環境構成の確認が不可欠です。特にVue 2→Vue 3への移行では、コンポジションAPIの採用やビルドツールの変更が大きく影響します。また、Nuxt 3はデフォルトでViteやWebpack5を活用し、パフォーマンス改善に注力しています。
なぜNuxt 3への移行が必要か
Nuxt 3はVue 3と緊密に連携しており、コンポジションAPIの採用やより高速なビルドプロセスが特徴です。また、2023年現在ではNode.js v16以上が推奨されるため、環境の最新化も移行の目的になります（2026年の情報は誤記）。
- 性能向上: Viteによるホットリロードの高速化
- 開発体験改善: コンポジションAPIとスクリプトセットアップの標準サポート
- 将来性: Vue 3の長期的なメンテナンスを踏まえた移行
移行前の環境確認手順
移行開始前には、以下の点を確認してください。
-
Node.jsバージョン
Nuxt 3はNode.js v16以上が必須です（2023年時点の推奨）。node -vで確認し、必要に応じてアップグレードします。 -
npm/yarnのバージョン確認
npm -vまたはyarn -vで最新版かをチェック。旧バージョンでは依存ライブラリとの互換性問題が発生する可能性があります。 -
既存プロジェクトのコード構造把握
以下のファイルやディレクトリの存在・構成をメモし、移行後の再現性を確保します。 -
components/ pages/store/
Nuxt 3プロジェクトの新規作成
Nuxt 3プロジェクトを作成するには、Nuxt CLI（nuxi）を使用するのが最も効率的です。また、ビルドツールとしてViteとWebpack5の選択肢が存在するため、目的に応じた導入方法を理解しましょう。
npx nuxi initでの初期設定
プロジェクトを作成するには以下のコマンドを使用します。
-
空のディレクトリを作成
bash
mkdir my-nuxt3-app && cd my-nuxt3-app -
nuxi CLIでプロジェクトを初期化
bash
npx nuxi init .
この際、プロンプトが表示されるため、プロジェクト名や使用するルーター（Vue RouterかNuxtのインナールーター）を選択します。 -
依存ライブラリのインストール
bash
npm install -
起動確認
bash
npm run dev
ブラウザでhttp://localhost:3000にアクセスし、正常に表示されているかを確認します。
ViteとWebpack5の選択ロジック
| 項目 | Vite | Webpack5 |
|---|---|---|
| ビルド速度 | 高速（推奨） | 通常より若干遅め |
| 環境構成 | シンプルな設定が可能 | 複雑なカスタマイズが必要 |
| ES Modulesサポート | デフォルトで自動対応（Viteの特徴） | Webpack5でもESMは利用可能（バージョン依存） |
| レガシーコードの移植 | 難易度高め（ES6以上推奨） | 旧バージョンとの互換性良好 |
選択ポイント:
- 新規開発・シンプルなプロジェクト → Viteを採用
- 複雑なロジックや旧ライブラリ使用 → Webpack5を選択
コンポジションAPI導入とスクリプトセットアップ
Nuxt 3では、コンポジションAPIがデフォルトでサポートされており、setup()関数を使ってコードを構成します。この変更により、コードの再利用性や可読性が向上します。
<script setup>記法の基礎構文
以下は、<script setup>記法を使用した例です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<script setup> import { ref } from 'vue' const count = ref(0) function increment() { count.value++ } </script> <template> <div>カウント: {{ count }}</div> <button @click="increment">+1</button> </template> |
Composition APIとの互換性設計
| 項目 | Options API | Composition API |
|---|---|---|
| コード構造 | メソッドとデータを別々に記述 | setup()内に集中管理可能 |
| 再利用性 | 純粋なミックスインのみ | composables/ディレクトリで共通関数を作成可能 |
| TypeScriptサポート | 制限あり（手動型定義必要） | 自動推論が効く |
注意点:
- 既存のOptions APIコードは、
setup()内でthisを使用することができないため、移行時に修正が必要です。
既存コードの移植手順
Nuxt 2からNuxt 3への移植では、コンポーネントやルーター・ストアの構造を確認しながら段階的に変更していきます。ファイル構造の差分を可視化したチェックリストを作成すると効率的です。
コンポーネント単位の検証フロー
components/ディレクトリ内の各コンポーネントを開き、<script>タグ内の構文を確認します。- Options APIを使用している場合:
<script setup>に移行し、thisの参照を削除します。 - データやメソッドが複数存在するコンポーネント:
composables/ディレクトリで共通関数を作成し、再利用性を高めます。
ルーター・ストアの更新ポイント
- ルーター設定: Nuxt 3では自動生成されるため、手動での記述は不要です。
- ストア（Pinia）:
useStore()を使用した呼び出し方法に統一します。例:
js
const store = useCounterStore()
store.increment()
移行時のエラー対処法
移行中に発生するエラーメッセージは、多くの場合がESLintやTypeScriptの警告メッセージに起因します。それらをケーススタディ形式で分析し、対処方法を整理しましょう。
よくあるコンパイルエラーパターン
| エラー内容 | 原因 | 解決策 |
|---|---|---|
TypeError: this is undefined |
Options API内でthisを使用していなかった |
<script setup>に移行する |
Property 'count' does not exist on type '{}' |
TypeScriptの型定義不足 | definePropsやrefで明示的に型を指定 |
依存ライブラリの互換性確認
Nuxt 3では、Vue 2用のライブラリが動作しない可能性があります。以下のように対応しましょう。
-
npm updateで最新版をインストール
bash
npm install --save nuxt -
パッケージ公式サイトやGitHub Issuesで、Nuxt 3のサポート状況を確認
- 例: nuxt/authは現在v1.xがNuxt 3対応
移行後のベストプラクティス
移行完了後も、継続的なパフォーマンスチューニングやアップデート戦略を考慮することが重要です。特にViteの特徴を活かした構成最適化が挙げられます。
パフォーマンスチューニングのポイント
- 画像圧縮:
vite-plugin-imageminなどのプラグインで軽量化 - コード分割:
defineAsyncComponent()でロジックを分離する - キャッシュ戦略: サーバーコンポーネントの
useFetchにcache: trueを指定
継続的なアップデート戦略
Nuxt 3はGitHubリポジトリ経由で自動テストやCI/CDが可能です。以下の手順で導入できます。
-
GitHub Actionsの設定ファイルを作成:
.github/workflows/deploy.ymlに以下を記述
yaml
name: Deploy
on: push
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- run: npm install
- run: npm run dev -
定期的なバージョンアップ:
npm outdatedで確認し、必要に応じて更新
bash
npm update nuxt