サービス運営や機能開発を止めずにNuxt2からNuxt3へ段階的に移行する手順と注意点について説明します。

Nuxt2のEOL(End Of Life)は2024年6月30日に延期されたため、まだ移行に猶予がありますが、Vue2は2023年12月31日でEOLを迎えたので、Vue2のライブラリは今後バグやセキュリティの不具合がサポートがされなくなるおそれがあります。今のうちに移行しておきましょう。

Nuxt2からNuxt3へ段階的に移行する際の大まかな手順と注意点を理解する

サービス運営や機能開発を止めずにNuxt2からNuxt3への移行手順を検討しているエンジニア。

UZUMAKIではアジャイル開発で新規事業の開発から、大規模Webアプリケーションのアーキテクチャ更新などの開発をしています。

お問い合わせはUZUMAKIのHPのお問合せフォームから

2022年11月にNuxt3がリリースされて1年が経過しましたが、まだ移行が済んでいない方もいらっしゃるのではないでしょうか？

Nuxt3(Vue3)では破壊的な変更が多く含まれており、サービスを止めずに移行するには段階的な対応が必要になります。

そこで、本稿では段階的にリリースを行いながら、サービスを止めずにNuxt3(Vue3)に移行する進め方を説明します。

説明する各ステップの単位でリリースが可能ですので、1つずつ進めていきましょう。

Nuxt2のEOL(End Of Life)は2024年6月30日に延期されたため、まだ移行に猶予がありますが、Vue2は2023年12月31日でEOLを迎えたので、Vue2のライブラリは今後バグやセキュリティの不具合がサポートがされなくなるおそれがあります。今のうちに移行しておきましょう。

Nuxt3移行にあたり、まずはVue2.7/3に対応していないライブラリを把握する必要があります。 サービス運用が長いと意外と更新が止まっていてアップデートしてもVue2.7/3に対応していないものが出てきます。

このタイミングで整理して、Vue2.7/3対応状況を調査しておくと後の作業がスムーズに行なえます。

また、マストではありませんが、無駄な移行作業を減らすためにもこのタイミングで使用していないコードやライブラリはなるべく削除しておくことをお勧めします。

従来のOptions APIでもNuxt3との互換性があり、引き続き使用することは可能ですが、ロジックを再利用可能にするcomposablesを使用するにはComposition APIに置き換える必要があります。特に、ロジックが複雑になりがちなページはComposition APIに置き換えていきましょう。

Composition APIに書き換えるために、まずは@nuxtjs/composition-apiを導入します。

現状がVue2.6以前の場合はv0.32.0を、Vue2.7以降であればv0.33.0以降を導入します。

@nuxtjs/composition-apiはv0.33.0からVue2.7に依存しているためです。

https://github.com/nuxt-community/composition-api/releases/tag/0.33.0

Composition APIの具体的な書き方についてはすでに多くの情報が出回っていますので、本稿では割愛します。

Vuexを使用している場合、@nuxtjs/composition-apiが提供しているuseStoreでstoreにアクセスできるのでVuexを残したままリリースできます。 https://composition-api.nuxtjs.org/packages/store/

ここでの注意点として、@vue/composition-apiは使用しないでください。

Vue2.7でComposition APIが導入されたため、@vue/composition-apiはメンテナンスモードとなりVue2.6以前しかサポートされなくなりました。 https://github.com/vuejs/composition-api

@nuxtjs/composition-apiによるComposition APIの書き換えは一気にやらなくても少しずつ移行しながらリリースが可能です。

Nuxtはv2.16.0からVue2.7に依存するため、Compositon APIが@vue/composition-api ではなくvueからインポートされるようになります。

そのため、Nuxtをv2.16.0以降にアップデートした際にVue2.7に未対応のライブラリが存在していると依存関係でエラーになります。

特に、@vue/composition-apiをすでに導入していた場合、すべて@nuxtjs/composition-api（v0.33.0以降）に置き換わっている必要があります。

最初のステップで整理した既存ライブラリにて、Vue2.7に対応しているものはアップデート、アップデートしてもVue2.7に対応できないライブラリは他のライブラリに移行しましょう。

例えば、@nuxtjs/axiosはNuxt3に対応していません。

Nuxt3からは代わりに$fetch APIが使用できますが、axiosをプラグインで実装することでNuxt3でも低い移行コストで利用が可能になります。 https://axios.nuxtjs.org/

mixinやfilterなどはVue3で廃止されたため、他の実装方法（utilsやcomposables）に移行します。 https://v3-migration.vuejs.org/breaking-changes/

Piniaを使用している場合、最新版はNuxt3（Vue3）に対応しているので差し替えの必要はありません。ライブラリをアップデートしましょう。

Vuexを使用している場合は’、composablesで実装するかPiniaに移行する必要があります。

ここまでの手順ができていると、Nuxt3へのアップデートがやりやすくなっているかと思います。

Nuxt3にアップデート後、各ライブラリもVue3に対応したバージョンにアップデートします。

公式ドキュメントのマイグレーション方法に沿って書き換えていきましょう。

https://nuxt.com/docs/migration/overview

詳しい書き換えの内容に関してはすでに多くの情報が出回っていますので、本稿では割愛します。

サービス運営や機能開発を止めずにNuxt2からNuxt3へ段階的に移行する手順と注意点について説明しました。

プロジェクトによっては必要な手順が異なる点もあるかもしれませんが、少しでも本稿がお役に立てると幸いです。

XではUZUMAKIの新しい働き方や日常の様子を紹介！ぜひフォローをお願いします！

noteではUZUMAKIのメンバー・クライアントインタビュー、福利厚生を紹介！

UZUMAKIではRailsエンジニアを絶賛募集中です。

↓の記事を読んでご興味を持っていただいた方は、ぜひ応募よろしくお願いします！

是非応募宜しくおねがいします！