➡️

Nuxt2 → 3 移行 参考資料まとめ

2023/11/09に公開
1

はじめに

現在よりそうでは Nuxt2 → 3 移行を行っています。
参考にした記事や資料を随時こちらにまとめていきます。

移行事例

https://speakerdeck.com/kzhrk/vue-2-no-eol-made-2-keyue-desugajin-bu-doudesuka

  • 事例多数
  • ざっくり解説

https://tome.app/mewton-8cb/vue-fes-2023-clnjmh8ez0044l77dwardvtga

  • 1300 vue ファイル
  • 漸進的に進められるように独自のマイクロフロントエンドフレームワークを構築

https://speakerdeck.com/wakkn/hurusukuratutiecnoji-pan-dearunuxt-2wo3niyi-xing-si-kai-fa-noxiao-lu-xing-topahuomansuwogao-meru

  • 移行後のパフォーマンスについて紹介

https://speakerdeck.com/sugitat/yahoo-toraberunonuxt3yi-xing-niokerukai-fa-purosesu

  • Nuxt3 移行の戦略の詳細を紹介
  • Nuxt Bridge を使わずに移行。その理由も紹介。

https://user-first.ikyu.co.jp/entry/2023/04/18/081144

  • 上のスライドのブログ版
  • 移行時のハマりポイントをコードレベルで紹介

https://zenn.dev/ubie_dev/articles/a9edd53e13bb26

  • Nuxt.js → Next.js
  • プロダクトチームから1人が独立して移行作業する形で実施
  • 2021 年と古めだが進め方の参考になりそう

Nuxt Bridge 関連

https://wattanx.dev/blog/directly-to-nuxt3-vs-nuxt-bridge/

  • Nuxt Bridge に適しているケースを説明
  • 移行周りの参考資料をいくつか紹介

Nuxt 移行に便利なツール

https://github.com/wattanx/nuxt-vuex-module

  • Nuxt3 でも Nuxt2 同様 Vuex を使えるようにする Nuxt Module

https://nuxt.com/modules/nuxt-gtm

  • @nuxtjs/gtm が Nuxt3 でサポートされていないのでこちらを利用
  • vue-gtm を wrap している薄いものなのでいざとなったら代替可能そうという理由で採用

nuxt/auth の移行

https://blog.nightonly.com/2023/09/01/nuxt3でsidebase-nuxt-authのlocalの挙動を調べてみた/#policy

  • nuxt/auth を nuxt-auth 移行する手順を記録した記事。

@nuxtjs/sentry の移行

https://techblog.hacomono.jp/entry/2023/08/08/110000

Vuetify の移行

https://github.com/userquin/vuetify-nuxt-module

  • このようなモジュール無しでも移行できるが、カスタムの SCSS の読み込み周りで警告が出たのでこちらを利用してみたところ解決した。

Nuxt3 からの変更点

https://zenn.dev/kazudeath1/scraps/7d92333292b534

  • 環境変数周りの扱いについて

おわりに

随時更新していきます!

よりそうテックブログ

Discussion

みっちーみっちー

大変参考になりました!現在 Nuxt2 -> bridge →Nuxt3への移行をしているのですが、
こちらのエラーが直りません。
公式ライブラリ等も参照したのですが、何か思い当たる箇所がございましたら教えていただければ幸いです!

スライドを参照にさせていただいたのですが、

bridge: false,にしないとParseError: Unexpected token, expected ","
になってしまいます。