Nuxt 2 → 3 を戦っていくには

自己紹介 株式会社 hacomono Platform group / Enabling team, FrontEnd TechLead みゅーとん ( @_mew_ton )  AngularJS (v1) → React (redux が主流の頃) → Nuxt 2.15 → Nuxt 3  個人のミッションとして, アバターワーク推進してます vue-fes 2022, 2023 ともアバターで登壇しました 採用面談や社内 MTG などでも  "VRChat フロントエンドエンジニア集会" 毎月開催してます • • ⚬ ⚬ • X(twitter) .. @_mew_ton github .. mew_ton

vue-fes japan 2023 では Nuxt2 から 3 へマイグレーションする方法考えてたら マイクロフロントエンドのフレームワークができた話  3 行で要約 iframe 使う Nuxt3 化の紹介 よく考えたらマイクロフロントエンドと同じ構成 フレームワーク化して OSS にした • • •

No content

話すこと / 話さないこと  話す vue-fes の感想 vue-fes で得た Nuxt 2 → Nuxt 3 の知見をそこそこまとめ   話さない vue 2 → vue 3 v3 化のメリット

vue-fes の感想  vue, nuxt の v3 化, みんな苦労してるんだなぁ・・

Nuxt 3 化の方法まとめ

Nuxt 3 化の方法まとめ 一気に乗り換える Nuxt Bridge を経由せずに一気に Nuxt 3 に乗り換えてしまう  Nuxt Bridge を導入 アーキテクチャを徐々に Nuxt 3 に近づけていく  段階的に乗り換える iframe を使う Nuxt 2 と Nuxt 3 のプロジェクトが両方存在する状態にする • • • •

手順紹介: 一気に乗り換える 場合  3 行でまとめ Nuxt 2 側を v2.17 にアップグレードし, v3 向けの記述に直していく Nuxt 3 で新しくプロジェクトを作る. Nuxt 2 側からコピペし, その過程で使えなくなった Nuxt Modules を直していく.  Pros / Cons Nuxt Bridge を経由せずにシンプルにえいや. 大きいプロジェクトで適応し辛い.   参考: Nuxt 3 Migration Simplified: A Cheat Sheet https://harlanzw.com/blog/nuxt-3-migration-cheatsheet ※ Vue.js クリニックのセッションで紹介されてたサイト • • • • •

手順紹介: Nuxt Bridge を使う場合  3 行でまとめ Nuxt Bridge を導入し, オプションを最低限のモードにする. コードベースを少しずつ Nuxt 3 向けになおしていく. 少しずつ Nuxt 3 の機能を有効にする. 完遂したら Nuxt 3 にする.  Pros / Cons 公式の方法に則っており, 安心感はある. 大きな変更を小出しにできる. 小出しであれど, 影響範囲は大きめ. コードの負債を潰し切るためのスタミナとパワーが要る.   参考: Demystifying Nuxt Bridge / wattanx (STORES) https://speakerdeck.com/wattanx/demystifying-nuxt-bridge  • • • • •

手順紹介: 段階的に乗り換える場合  3 行でまとめ Nuxt 3 側に iframe だけのページを作り, そこから Nuxt 2 側のページを開く. ブラウザのパスを親と子で同期させる Nuxt 3 側で新しいページを作ったら, iframe のページから新ページにリダイレクトさせる  Pros / Cons いままでの負債を見なかったことにできる. プロジェクトが大きすぎる場合に使える. もっともパワーが必要. iframe に対する生理的嫌悪感.   参考: Nuxt2 から 3 へマイグレーションする方法考えてたら ( 略) / mewton https://tome.app/mewton-8cb/vue-fes-2023-clnjmh8ez0044l77dwardvtga • • • • •

Nuxt Bridge を導入できないケース プロジェクトがでかすぎる クソデカモノリスフロントエンド リリース 1 回の影響範囲が大きすぎる Vue, Nuxt の標準的な記法に則っていない Vue, Nuxt の標準的でない “ 変なこと” をしている • ⚬ • • •

hacomono での例 管理サイト Components .. 700 vue files, 100000 lines Pages .. 600 paths, 50000 lines Vuex Store .. 200 files, 700 stores  Nuxt 2.15 Module Federation のようなものを独自実装   • • メンバーサイト Components .. 400 vue files, 25000 lines Pages .. 250 paths, 15000 lines Vuex Store .. 80 files, 214 stores  Nuxt 2.15 nuxt property decorator Nuxt Island のようなものを独自実装 • • •

Nuxt 3 化前にやるべきこと

Vue 3, Nuxt 3 を理解する  別のプロジェクトを作る or 学習する時間を設けるなど 2 系と 3 系の差分を理解しておく         参考: Nuxt 3 Migration Simplified: A Cheat Sheet https://harlanzw.com/blog/nuxt-3-migration-cheatsheet • •

Vitest を予め導入しておく  webpack → vite となった際のエラーを部分的に事前に検知できる Nuxt 3 では vitest が標準になる nuxt-vitest ( 将来的には nuxt/test-utils に統合される)  ※ 弊プロジェクトでは, これで循環参照を検知した     参考: Nuxt to the Edge / Sebastien Chopin 参考: Nuxt 3 で始めるテスト導入戦略と初手 / 野崎 才門 (hacomono) https://speakerdeck.com/hacomono/nuxt-3dehazimerutesutodao-ru-zhan-lue-tochu-shou • • ⚬

機械的な修正を検討する  eslint-plugin-vue を使う 機械的にコードを変換     参考: Vue 2 の EOL まで 2 ヶ月ですが、進捗どうですか？ / 小林 和弘 (MedPeer) https://www.slideshare.net/KazuhiroKobayashikzh/vue-2-eol-2 参考: eslint-plugin-vue の現状と今後 / 太田 洋介 (Future) https://ota-meshi.github.io/vue-fes-japan-2023-slide 参考: eslint-plugin-vue を使用して継続的に vue3 に移行する / 太田 洋介 (Future, vue-fes jp 2022) https://ota-meshi.github.io/vue-fes-japan-online-2022-slide 参考: 走りながらエンジンを交換する ~ 大規模プロダクトを成長させつつVue3 にするには / 篠田 貴大 (CloudSign) https://speakerdeck.com/bengo4com/20231028 • •

おわり

References

References (1/1)  vue-fes jp 2023 sessions Demystifying Nuxt Bridge / wattanx (STORES) Nuxt2 から 3 へマイグレーションする方法考えてたら ( 略) / mewton Nuxt to the Edge / Sebastien Chopin Nuxt 3 で始めるテスト導入戦略と初手 / 野崎 才門 (hacomono) Vue 2 の EOL まで 2 ヶ月ですが、進捗どうですか？ / 小林 和弘 (MedPeer) eslint-plugin-vue の現状と今後 / 太田 洋介 (Future)  走りながらエンジンを交換する ~ 大規模プロダクトを成長させつつVue3 にするには / 篠田 貴大 (CloudSign) Vue.js クリニック • • • • • • • •

References (2/2)  site Nuxt 3 Migration Simplified: A Cheat Sheet  vue-fes jp 2022 sessions eslint-plugin-vue を使用して継続的に vue3 に移行する / 太田 洋介 (Future) • •