Nuxt 3 から Nuxt 4 へ移行する

私のウェブサイト「Hiratake Web」でも使用している Nuxt のバージョン 4 がリリースされたので更新してみました🛠 Nuxt 3 がリリースされたのが 2022 年 11 月なので、メジャーバージョンアップは約 2 年半ぶり。大きな変更が入ることの多いメジャーバージョンアップなので「面倒だなー」とは思いつつ、いつかは対応しなくてはならないので移行しました。

元々使っていた Nuxt のバージョンと、更新後のバージョンは以下の通り。作業を行ったのは このウェブサイトのリポジトリ です。Nuxt のウェブサイトに Nuxt v4 へ更新する際のガイド が用意されているので、こちらを参考にしながら対応を行いました。

• 使っていたバージョン - 3.17.7
• 更新後のバージョン - 4.0.3

Nuxt v4 での変更点は大きいものから小さいものまで色々ありますが、今回作業を行った環境では既に Nuxt の設定ファイル nuxt.config.ts で future.compatibilityVersion: 4 を指定して使っていたので、コードの書き換えなどの作業はほとんど必要ありませんでした。

なので、メジャーバージョンアップ対応といっても、実際に行った作業は普通に新しいバージョンの Nuxt をインストールしただけ。パッケージを定期的に更新してくれる Renovate を導入していたのですが、こちらで作られた Nuxt v4 への更新のプルリクエストの時点で、GitHub Actions で用意していたチェックは全て成功していましたし、Cloudflare Pages へのデプロイも成功していました。

v4 での一番大きな変更はディレクトリ構造の変更のようなので、future.compatibilityVersion: 4 を指定して使っていなかったとしても、ファイルの場所をゴソッと移動するだけで対応できるのでは？という感じ。次に大きな変更も、useAsyncData で同じキーを使い回すようなことをしていなければ特に影響はなさそう。

重い腰を上げて Nuxt 4 への更新を行いましたが、「メジャーバージョンアップだし大変だろうな…」と思っていたら特にコードを変えなくても問題なく動いてしまったので拍子抜けした気分。逆に、本当にこれでいいのかと不安になっています。

今のところ表示が崩れているとか、内容が正しく出力されていないみたいなおかしなところは見つかっていないので、とりあえずはそっとしておくことにします。