先日、業務でVueとNuxtのバージョンアップをしようと調査したので、その内容をまとめておきます。
ぜひご覧ください。

読む人のメリット

vueのバージョンアップやNuxtのバージョンアップをしようとしてる方の調査をこの記事を読めば省略できます。

調査まとめ

やりたかったこと

• vue3.2アップグレード
• NuxtBridgeアップグレード
• OptionsAPIからcomposition APIに書き換え

注意事項

• IE11のサポート中止 - vue3系

作業順序と所要期間

一旦、リポジトリ分けずPRを作成していく。
全部で大きく分けると4ステップ。

① vue3.2アップグレード(Nuxt2) - 期間 → 1日~数週間

• vue3.2にアップデート
• @vue/compat@3.2導入
• compatモードを有効化
• 警告が少なければ一気に修正。多ければ段階的に修正
• transitionクラス名の更新
• 新しいグローバルマウント APIを使用するようにアプリのエントリを更新
• vuexをv4にアップグレード
• vuex-routerをv4にアップグレード
• 移行ビルド削除してvue3へ切り替え

② nuxt3アップグレード - 期間 → 1日 ~ 3日

• nuxt2をアップグレードする
• 依存関係をインストール
• NuxtBridgeをインストールする
• スクリプト更新 (ex. nuxt build→ nuxi build )
• nuxt.configをアップデート
• tsconfig.jsonをアップデート

③ OptionsAPIからcomposition APIに書き換え- 期間: 1週間 ~ 1ヶ月

これはこれでどこに導入するか、どこから変えていくかプランが必要だが初期はやらなくてもOK

制約

• nuxt3はvue3じゃないと使えない

想定課題

• 移行コストが大きい(ビッグバンリリースになってしまう)
  • ① vue3にアップグレードすると、全てのファイルをvue3対応しなければならない
  • ② vue3とnuxt3をセットでバージョンアップさせないといけない

想定課題の解決方法

段階的にバージョンアップに伴う変更を行なっていく

• 移行ビルドを使う (→ ①)

  • vue2モードで動作する
  • vue3で変更、非推奨になった機能を使用すると実行時に警告
  • 移行が完了したコンポーネントから、compatConfigのMODEを3にオプトインできる

• OptionsApi(vue2)をCompositiおnAPI(vue3)にすぐに書き換えなくても動くのでOK (→ ①)

CompositionAPIは複雑なコンポーネント(カレンダーとか)に適用すると便利

• Nuxt Bridgeを使う(Nuxt2でNuxt3の新機能を使える上位互換性レイヤー。公式が推奨) (→ ②)

今のバージョン

• vue 2.6.14
• nuxt 2.15.7

Nuxt3の新機能について

• Nitro Engineによる最大で75倍の高速化
• ISG（インクリメンタル・スタティック・ジェネレーション）などの高度なモードへの対応予定
• ナビゲーションの前後を問わず、どのコンポーネントでもデータを取得可
• Composition APIのネイティブサポート
• Nuxt CLI登場
• Nuxt Devtools登場予定
• Webpack 5に対応
• Vitaに対応
• Vue 3のネイティブサポート
• TypeScriptのネイティブサポート
• APIルートのサポート

vue3の新機能(変更)について

• IE11のサポート中止
• Composition API → 大規模・複雑なコンポーネントを作りやすくなる
• Teleportが使える → CSSを使わずmodalやtooltipを表示・非表示できる
• Fragments → 単一のdivで囲まなくてもOK
• Suspense → コンポーネント を作るまで表示できる

注目すべき新機能

Nuxt3導入後の変化

• vuexをやめてnuxt3のuseStateでグローバル管理する

合わせてインストールしておきたいもの

• Vite - Vueのビルドツール。VueCLIに比べると軽快。 → webpackより速いけど、typescriptの型チェックがない
• Volar - Vue3のVSCの拡張機能。VueでいうVetur