はじめに

前回、compositon-api化を行ったので、最後にVue3へ完全移行した。

主に以下のライブラリを更新し、各ライブラリの更新手順書を参考にしながら、対応していった。

package.json


(dependencies)
- "element-ui": "^2.13.0",
- "vue": "^2.7.0",
- "vue-router": "^3.6.5",
- "vuex": "^3.1.3",
+ "element-plus": "^2.3.6",
+ "vue": "^3.3.4", 
+ "vue-router": "^4.2.2",
+ "vuex": "^4.1.0",

(devDependencies)
-"sass": "^1.26.3",
- "webpack": "^4.42.1"
- "eslint": "7.32.0",
- "eslint-plugin-vue": "^7",
+ "sass": "^1.63.4",
+ "webpack": "^5.87.0"
+ "eslint": "^8.42.0",
+ "eslint-plugin-vue": "^9.14.1",
+ "core-js": "^3.31.0",

Vueの更新

基本的には、Vueの移行ガイド通りに実施する。

vue/compat を入れることで、Vue2系とVue3系の構文が併用できる。
Vue2系の構文はワーニングでるので、基本的にはその対応を行う。
- 破壊的変更が主な修正対象

vueRouter

vueと同様に破壊的変更を確認し、対処する

今回、vueRouterの破壊的変更や、型定義の変更が多くあり、修正に時間がかかった。
以下、対応の一部。
アスタリスクによる全パス指定はできなくなり、かわりに正規表現で指定する

route.ts

- { path: '*', ...}
+ { path: '/:pathMatch(.*)*', ..:}

paramsの受け渡し方法が変更になり、パスにパラメータを含めることが必須となった。
post的な使い方で、オブジェクトを受け渡していたため、一律queryパラメータへの変更した。URLが長くなってしまったが、一番影響が少ない方法がこれだった。
JSON.stringfy ⇔ JSON.parse でオブジェクトと文字列の変換も必要であった。

vuex

そのまま続投できるらしい。(pinia推奨だが）
vuex3→4へ上げる際は若干の破壊的変更があるのでその対応

Vue-cli × Webpack5

vue-cliとwebpackを5系に上げた。
core-jsモジュールのエラーが出るので、素直にcore-jsを入れた。

eslint

vue3系のpluginを設定する

.eslintrc.js

- extends: ['plugin:vue/strongly-recommended', '@vue/typescript/recommended', '@vue/prettier'],
+ extends: ['plugin:vue/vue3-strongly-recommended', '@vue/typescript/recommended', '@vue/prettier'],

その後、yarn vue-cli-service lint --fixのlint自動修正で、slot構文や、sync構文の書き換えをしてくれる。

elment-uiをelment-plusへ

el-input に値を入力できない。v-modelが機能してなさそう
- vue/compatが原因だった。comatを入れると、vue2系でコンパイルされてしまうらしい。
- 以下の対応で、vue3系でコンパイルされ動くようになったが、画面が動くようになったら早々にvue/compatは外したほうが良かったかも。

main.ts

import { ElInput } from 'element-plus'

ElInput.compatConfig = { MODE: 3 }

el-buttonのレイアウトが崩れている。
- 高さ32pxが指定されてたのが原因だった。styleで上書きしてやる必要がある。

index.scss

.el-button {
  height: auto;
}

他にも、v-formのrulusの型定義や、date-pickerのフォーマット指定がdayjs準拠になったこと、スタイルの違いなどを確認して治していった。

所感

作業手順的には各ライブラリ毎に、概ね以下を行っていった。

公式ドキュメントのマイグレーションの項を確認し修正。
コンソールやターミナルにエラーが出るので調査。大体がバージョン起因のものなので、参考にするのは公式を優先
- 公式ドキュメント、またはgithubのchangelogページを確認し、Breaking Changeを対応する
- ほとんどがそれでOKだった。