Vue3 への更新

Vue3 がリリースされてそろそろ 1 ヶ月ほど経ち、個人プロジェクトを Vue2 から Vue3 へ更新したのを機に、
現状での Vue3 への更新方法を確認しておきましょう。

vue-cli-plugin-vue-next

vue-cli-plugin-vue-nextを使い環境を更新する方法です。
このプラグインは Vue3 のベータ版が配信された時期にリリースされました。

使用方法

更新したい Vue CLI のプロジェクトにて、以下のコマンドを入力します。

vue add vue-next

Vue2 の環境が Vue3 へ置き換えられます。
しかし、Vue本体や、Vuex、Vue-routerなどが Vue3 ベータ版やアルファ版のに置き換えられるため、
現状のリリースされている最新版のVuex、Vue-routerを使用したい場合には、別途手動で更新が必要となります。
なお、Vue本体はvue upgradeでも更新できなかったため、現状ベータ版からの更新はプラグインの更新待ちだと思われます。

Vue CLI で上書き更新する

最新版のVue CLIを使い、Vue2 のプロジェクトを上書きして更新する方法です。
環境と同時にpackage.jsonなどの環境を書いたファイル、main.jsなど、重要なファイルも上書きしてしまうので、かなり破壊的な方法になります。

前提としてVue CLIを最新のに更新しなくてはなりません。
コマンドプロントでVue -Vをした時に、

@vue/cli 4.5.X

以上になっていれば、Vue3 を扱うことができます。
もしそうでなければ、npmやyarnを用いてVue CLIを最新のものにしましょう。

やり方

手法としては、更新したいプロジェクトと同じ名称のプロジェクトを新規に作成すると言った方法です。

vue create hogehoge

あとは、必要機能などをなるべく更新したいプロジェクトと同じに指定していくだけです。
ただし、無事更新が終わっても、上記で述べたとおり、package.jsonやmain.jsの内容も書き換えられてしまうので、
Vue2 で整えた環境を大きく崩してしまう手法でもあるため、小規模ぐらいのでしか使えない手法となります。
(環境の再構築をやってしまうという覚悟があれば取れる手法ではありますが、現状ではおすすめできない…？)

11/05 追記

Jestで単体テストを行おうとしたらvue-template-compilerのバージョンとVueのバージョンが合わないぞということで、
単体テストでエラーが発生してしまいました。
やはり単純に上書きした程度では、色んな依存関係がぐちゃぐちゃになるので、やらないほうがいいなと言う結論に。

終わりに

私の観測範囲内で以上の 2 つが主なやり方かな？と思います。

vue-cli-plugin-vue-nextのやり方は破壊的でもなく、必要な箇所だけを Vue3 へ更新をしてくれますが、
プラグインだったり Vue3 が Beta 版だったりで、現状プラグインの開発が止まっています。

対して、Vue3 のプロジェクトを作る手法での上書き更新も、開発環境を破壊しての更新となってしまいます。
ただし、正規公開版の Vue3 を使用できるため、今後はvue upgradeを使えば最新の Vue3 を使うことができます。

どちらの手法も現状ではメリットデメリットが強く、まだまだ既存プロジェクトをVue3へするには時期が早いかなと言うのが個人の判断です。
(といいつつ、私の個人プロジェクトはVue3へ更新しちゃいましたが！)
恐らく年末年始から3月にかけて、安定してVue3へ更新できるプラグインができると思うので、現状ではそれ待ちかなと思います。
新規プロジェクトはがっつりVue3でやっちゃっていけるので、そっちでVue3とはを慣れていきましょう！