Vue.jsを2から3にアップグレード

個人のお遊びプロジェクトのVue.jsを、2から3にアップグレードしてみます。

Vue.js 3をインストール

手探りな感じですが、とりあえず、package.jsonを以下のように修正して、Vue.js 3をインストールしてみます。

- "vue": "^2.5.17",
+ "vue": "^3.0",

アップデートします。

> npm update
（中略）
32 vulnerabilities (8 moderate, 24 high)

案の定、依存パッケージで脆弱性エラーが32件発生しました。

> npm audit fix --force
（中略）
found 0 vulnerabilities

上記コマンドを実行。すごい、一発で直った。

また、3ではパッケージ「vue-loader」が必要みたいなので、事前にインストールしておきます。

> npm install vue-loader

開発環境

Vue.js 2の開発環境にはVisual Studio Codeのプラグイン「Vetur」を使っていましたが、Vue.js 3では、より最適化された「Volar」が利用できるみたいなので、入れ替えます。
Vetur – Visual Studio Marketplace
Vue Language Features (Volar) – Visual Studio Marketplace

ソース調整

例えば、これまでのVue.js 2のコードはこちら

window.Vue = require('vue');
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
const app = new Vue({
	el: '#app',
});

Vue.js 3では以下のようにコンポーネントを登録して、マウントします。

import { createApp } from 'vue'
import ExampleComponent from './components/ExampleComponent'
createApp({
	components: {
		'example-component': ExampleComponent,
	},
}).mount("#app")

とりあえず、私のプロジェクトはこれでアップグレードを完了しました。アプリも問題なく動作しています。
事前にVueのバージョンアップは大変という話を聞いていたので、身構えていましたが、予想外にあっさり作業を完了してしまいました。小規模だからかな。
以後、不具合などみつけたら、この記事を更新していきたいと思います。