概要

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

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

目次

• 概要
• 目次
• 目的
• 対象読者
• PR
• 本文
• サービスを止めないNuxt3移行の進め方
• そもそもなぜNuxt3に移行する必要があるのか
• Nuxt3への段階的な移行の進めかた
• 既存ライブラリを整理
• Composition APIへの書き換え
• Vue2.7に対応する
• Nuxt3に対応していないNuxt Moduleをプラグインで実装する
• 廃止になった仕様をutilsやcomposablesに移行
• 状態管理の移行（Vuexを使用してい場合）
• Nuxt3にアップグレードする
• まとめ
• PR

目的

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

対象読者

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

PR

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

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

株式会社UZUMAKI

UZUMAKI（うずまき）はエンジニア・デザイナー・ディレクターで構成されるギルド型開発チーム。成長するWebサービスやアプリのリニューアル・リファクタリングに強みがあります。

uzumaki-inc.jp

本文

サービスを止めないNuxt3移行の進め方

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

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

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

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

そもそもなぜNuxt3に移行する必要があるのか

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

Nuxt3への段階的な移行の進めかた

既存ライブラリを整理

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

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

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

Composition APIへの書き換え

従来の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の書き換えは一気にやらなくても少しずつ移行しながらリリースが可能です。

Vue2.7に対応する

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に対応できないライブラリは他のライブラリに移行しましょう。

Nuxt3に対応していないNuxt Moduleをプラグインで実装する

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

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

廃止になった仕様をutilsやcomposablesに移行

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

状態管理の移行（Vuexを使用してい場合）

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

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

Nuxt3にアップグレードする

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

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

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

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

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

まとめ

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

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

PR

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

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

UZUMAKI｜note

株式会社UZUMAKIです。主に代表の工藤が投稿してますが、ほかのメンバーもたまに投稿します。https://uzumaki-inc.jp/ 受託開発を生業としてますが、リモートワークを通じて、今までにない組織形態での働き方を模索、実践しています。

note.com

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

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

UZUMAKI 採用情報

これを実践するには、通常の社会で求められる上司による部下の管理が必要という前提が不要になってきます。例えば、時間管理をしない、圧倒的な性善説で動く、メンバーは自発的に動くということをUZUMAKIでは当たり前のように行っております。 現在は、 コーポレートサイト記載の企業 ...

job.uzumaki-inc.jp

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