目次
はじめに
Nuxt2で開発したシステムをNuxt2からNuxt3にバージョンアップしました。
4年前に開発したシステムで画面数は20画面くらいの小システムになります。Nuxt2のSPAモードで動作しており、バックエンドはLambda（Python）でDB（Postgresql）でした。少し改修はあったが安定稼働しておりました。ただ今後使っていくのかは不明でしたが、この度使っていくことが決定し、バージョンアップが必要だよねということになりました。（Vue2のサポート期限が2023/12/31、Nuxt2のサポート期限が2024/06/30でした。）
WEBでNuxt2からNuxt3のバージョンアップを調べると皆さん苦戦したみたいでいろいろ記事があります。中にはNuxt3にするのをあきらめて別のフレームワークに移行されているところもあるみたいです。
https://www.tribeck.jp/column/opinion/production/20231016/
https://zenn.dev/luup_developers/articles/server-mise-20231223
https://zenn.dev/aoken/articles/6e89127b8b4575
基本方針
システムの移行方法としては2パターン考えました。
- 設定ファイルをv2→v3に変更、その後ひたすらエラー対処
- Nuxt3で新規プロジェクトを作成、1画面ごとに持ってくる
1.でやりだして詰まったら2.にしようかと思っていたのですが、結局2.でやりきりました。
開発する前の基本的な方針は以下でした。
- Vuex → Pinia やる
- Options API → Composition API やらない
- Javascript → TypeScript やらない
- axios → fetch API やる
- cookie-universal-nuxt → useCookie やる
Vuexとaxiosはなくなってしまったので別の推奨されている方法で実装、cookieはデフォルトで使用できる方法があるのでそちらを使う、Options APIとJavascriptはNuxt3でも使用できるのでそのままにしました。
苦戦した箇所
・モジュール間の競合の解消
package.jsonに記載されているパッケージがいくつかあり、新しいバージョンを使用するように変更するのですが、ほかのパッケージで古いバージョンを使用していたりという感じで依存関係とNuxt3でなくなるパッケージなどなどでビルドが通るまでかなり時間を要しました。
・環境ごとファイル
以前は環境ファイルの切り替えをnuxt.config.jsでやっていたのですが、Nuxt3ではそれは動かずnuxt.config.jsにruntimeConfigの記述が必要になりました。
・middlewareが動作しない
middlewareを公式ホームページに従って書き換えたところ、設定していた画面から呼び出されないようになってしまった。多分公式ホームページの書き方がComposition APIであり、各画面がOptions APIで不一致のため動作しないと思われます。middlewareをpluginに書き換えasyncDataで呼び出すように変更しました。middlewareの呼び出される順番とasyncDataの呼び出される順番は少し異なるが処理的に問題がなかったためこの方法を取りました。
・pluginファイルの書き換え
pluginファイルは複数あったがすべて新しい書き方に変更しました。各VueからはnuxtAppを呼び出しnuxtApp.$xxxみたいな感じで呼び出すように修正しました。
おわりに
結局ほとんどすべてのjsファイル、vueファイルの修正が必要でした。テストも各画面ごとにテストが必要になりなかなかの工数がかかりました。
Nuxt3からNuxt4のバージョンアップは楽になるみたいですね。