Vol.2 Nuxt 2からNuxt 3への安全なアップデート手順

「そろそろNuxt 3にアップデートしないと…でも、どこから手をつければいいんだろう？」

Vue 2で作られた大規模なプロジェクトを抱えている方なら、このような悩みを持っているのではないでしょうか。Nuxt 3は魅力的な新機能が満載ですが、既存のプロジェクトのアップデートには慎重になりますよね。

実は私も最近、あるプロジェクトのアップデートを任されました。初めは不安でしたが、段階的なアプローチを取ることで、チームメンバーの学習コストを抑えながら、安全に移行を完了することができました。

今回は、その経験を通じて得られた「現場で使える」具体的なアップデート手順をご紹介します。

一気に進めるのではなく、確実に、そして安全にアップデートを進めていくためのノウハウをお届けします。

今回は、多くの開発者が直面するであろう「Nuxt 2からNuxt 3へのアップデート」についてです。

前回はPiniaとComposition APIの使い分けで迷わない状態管理についての解決記事でした。興味ある方は是非ご覧ください。

実際に自分もNuxt2で作られていたサービスvue3にアップデートして新たに作る案件で苦労した経験があります。

結論から！
具体的な手順と注意点
実践的なTips
参考資料：Nuxt 2とNuxt 3の主要な変更点
まとめ

結論から！

Nuxt 2からNuxt 3へのアップデートは、以下の手順で段階的に進めるのがおすすめです：

まずはVue 2のままNuxt 2の最新バージョンにアップデート
Vue 2からVue 3への移行準備（Composition APIの導入）
Nuxt Bridge導入による段階的な移行
最後にNuxt 3への完全移行

具体的な手順と注意点

Step 1: Nuxt 2を最新版にアップデート

まずは現在のプロジェクトを最新のNuxt 2にアップデートします：

bash

# package.jsonのnuxtのバージョンを更新
"nuxt": "^2.17.0"

# 依存関係を更新
npm install

このステップでの注意点：

既存の依存パッケージとの互換性を確認
デプロイ環境での動作確認を必ず行う

Step 2: Composition APIの導入

Vue 2プロジェクトにComposition APIを導入します：

bash

# @vue/composition-apiをインストール
npm install @vue/composition-api

javascript

// plugins/composition-api.js
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'

Vue.use(VueCompositionAPI)

javascript

// nuxt.config.js
export default {
  plugins: ['@/plugins/composition-api']
}

Step 3: Nuxt Bridgeの導入

Nuxt BridgeはNuxt 2からNuxt 3への橋渡しとなる重要な要素です：

bash

# Nuxt Bridgeのインストール
npm install --save-dev @nuxt/bridge@npm:@nuxt/bridge-edge

javascript

// nuxt.config.js
import { defineNuxtConfig } from '@nuxt/bridge'

export default defineNuxtConfig({
  bridge: {
    meta: true,
    nitro: false,
    vite: false
  }
})

Step 4: Nuxt 3への完全移行

最後にNuxt 3への完全移行を行います：

bash

# Nuxt 2の依存関係を削除
npm remove nuxt

# Nuxt 3をインストール
npm install nuxt@3

typescript

// nuxt.config.ts
export default defineNuxtConfig({
  // Nuxt 3の設定
})

実践的なTips

1. 段階的な移行のポイント

アップデート作業を進める中で、最も重要なのはプロジェクトの安定性を保つことです。以下のポイントを押さえることで、安全な移行が実現できます：

各ステップでのテストを徹底する
機能ごとに優先順位をつけて移行する
新規機能はVue 3/Nuxt 3の書き方で実装する

2. よくある問題とその対処

移行作業中に多くのチームが直面する共通の課題があります。これらの問題に事前に備えることで、スムーズな移行が可能になります：

Vuexからpiniaへの移行
プラグインの互換性確認
TypeScriptの導入と型定義の整備

3. パフォーマンス改善のチャンス

アップデート作業は、単なる移行ではなく、アプリケーションを改善するチャンスでもあります。以下の点に注目して、より良いアプリケーションを目指しましょう：

コンポーネントの最適化
バンドルサイズの削減
ビルド時間の短縮

はい、まとめの前に主要な変更点を表で追加しましょう。

参考資料：Nuxt 2とNuxt 3の主要な変更点

機能/特徴	Nuxt 2	Nuxt 3	移行時の注意点
Vue バージョン	Vue 2	Vue 3	Composition APIへの対応が必要
TypeScript	部分的なサポート	完全なサポート（デフォルト）	型定義の追加と見直しが必要
状態管理	Vuex	Pinia（推奨）	ストアの書き直しが必要
ディレクトリ構造	layouts, pages, store等が必須	より柔軟な構造必要なディレクトリのみ作成可	移行時にディレクトリ構造の見直しが可能
ビルドツール	webpack	Vite（デフォルト）	ビルド設定の見直しが必要
サーバーエンジン	Connect	Nitro	サーバーサイドの処理の書き直しが必要
プラグイン定義	plugins/index.js	plugins/*.ts	プラグインの互換性確認が必要
ルーティング	Vue Router 3	Vue Router 4	動的ルーティングの書き方が変更
コンポーザブル	@nuxtjs/composition-api	組み込み	useAsyncDataなどの書き方が変更