wattanx
TimelineBlogAbout

Nuxt 3 に直接移行するか Nuxt Bridge を使うか

2023/11/03

wattanx

結論

以下のような条件にあてはまる場合は、Nuxt Bridge を使う恩恵を得られると思っています。

  • コンポーネントやページ数が多く、比較的大きなアプリケーション
  • Nuxt 3 へ移行するためのリソース（人員、工数）がない

上記に当てはまらない場合は、Nuxt 3 へ直接移行したほうが効率が良いかもしれません。

はじめに

Nuxt 3 へ移行する方法として、大きくは下記の二通りだと思っています。

  • Nuxt Bridge を使って Nuxt 3 へ移行する
  • Nuxt 3 へ直接移行する

Nuxt Bridge を作っている身なのでもちろん Nuxt Bridge を使ってほしいですが、使わないほうが移行がスムーズだと思うケースもあるので、個人的にどう選んでいるかを書きます。

Nuxt Bridge を使った方がいいと思うケース

コンポーネントやページ数が多く、比較的大きなアプリケーション

Nuxt 2 から Nuxt 3 では多くの破壊的変更があります。

  • @nuxtjs/composition-apiが不要になる
  • middlewareやpluginsの書き方や登録方法が変更
  • Component Option からdefinePageMetaに変更
  • 他にもたくさん

これらの対応を一つのリポジトリで行うのは、非常に大変です。

Nuxt Bridge を使えば、Nuxt 2 の状態で Nuxt 3 移行が進められます。

Nuxt Bridge を使うと Nuxt 3 との差分が小さくなるので、一つのリポジトリでも移行をしやすくなります。

また、Nuxt Bridge を使った移行は少しずつ進められるので、一つのリポジトリでも進めやすいです。

（私は 1000コンポーネント以上、170ページほどあるプロダクトで Nuxt Bridge を使っています。）

Nuxt 3 へ移行するためのリソース（人員、工数）がない

Nuxt Bridge を使った移行は少しずつ進められます。

そのため、まとまった時間がとれるまでは隙間時間で進めることができます。

Nuxt 3 へ直接移行したほうがいいと思うケース

コンポーネントやページ数が少なく、比較的小さなアプリケーション

Nuxt Bridge は Nuxt 3 との差分を減らすことができますが、元々の規模が小さいと差分を減らしてもほとんど恩恵得られないと思っています。

なので、小さいアプリケーションの場合は直接移行した方が良いと思っています。

別リポジトリで作り直したいと思っている

同じリポジトリ内で移行するのではなく、別リポジトリで作り直したいと思っている場合は、Nuxt 3 に直接移行したほうが効率が良いと思っています。

別リポジトリで作り直す場合は、Nuxt 3 との差分を気にする必要がないので Nuxt Bridge の恩恵はほとんどないと思います。（差分を減らしてから移行してもよいが、テストを複数回する必要があり手間なので）

まとめ

ここに書いてあることは Nuxt Bridge を作ったり、実際に使ったりして個人的に思っていることです。

他にも様々な移行方法があると思います。自分たちのプロダクトにあった移行方法で進めていくのが良いと思っています。 (どんな移行方法を選んでもしっかり計画を立てて進めるのがよいと思います。)

それぞれの移行方法に関する記事

Nuxt Bridge を使う場合

これまでの経験をもとに書き直しました。改善点があればぜひ issue や PR 作っていただきたいです。

Migrate to Nuxt Bridge: Overview

Reduce the differences with Nuxt 3 and reduce the burden of migration to Nuxt 3.
title

Vue Fes 2023 の登壇資料です。上記のドキュメントに補足を入れてます。実際に Nuxt Bridge の事例等も書いているのでぜひ参考にしていただければと。

Demystifying Nuxt Bridge

Vue Fes 2023 wattanx
title

Nuxt 3 へ直接移行する場合

Nuxt Core Team の Harlan が書いたとてもいい記事です。ぜひ参考にしてください！

Nuxt 3 Migration Simplified: A Cheat Sheet | Harlan Wilton

A simplified cheat sheet for migrating from Nuxt 2 to Nuxt 3. Includes a list of all the changes you need to make to your Nuxt 2 project to get it working with Nuxt 3.
title

同じリポジトリ内で Nuxt 3 に直接移行する方法が書かれていてとても参考になります。

一休. com/Yahoo!トラベルのNuxt3移行における開発プロセス

title

iframe を使って Nuxt 3 へのマイグレーションを進める方法が書かれています。

Nuxt 2から3へマイグレーションする方法考えてたら、マイクロフロントエンドのフレームワークができた話

プロジェクトは Nuxt2 で、ページ数やコンポーネントの数、コードの絡み具合から、どうしても Nuxt Bridge を使ってのマイグレーションは困難と判断せざるを得なかった。 そこで、元の資産に手を加えずに、ページ単位で Nuxt3 にどうやって移行していくかを考えていくことにした。 試行錯誤の末、マイクロフロントエンドのフレームワークが生まれてしまったのでした。 株式会社hacomono フロントエンドテックリード 基盤グループ Enabling チーム VRChat フロントエンドエンジニア集会主催 みゅーとん / mew-ton
title