【Laravel × vue.js】影響範囲最小限でvue2→vue3を行う

そろそろvue3も使ってみるかーと思い腰を上げて、Laravel×vue2のプロジェクトを vue3に上げて観ました。

その時の手順を記載します。

vue2→vue3を行う

では、早速vue2からvue3に移行します。

関連パッケージをアップデートする

npm i -D laravel-mix@next vue@next @vue/compiler-sfc vue-loader@next

僕が引っかかったポイントとしては、 vue-js-modal というライブラリがvue3対応してなさそうということです。vue-js-modal が入っていると依存関係が解決せずに、vue3にアップグレードできなさそうでした。

僕は vue-js-modal を削除して、vue3の新機能である「teleport」を使ってモーダルをリプレイスしていきます。
他にもvue3で使えないライブラリはあるかもしれないですね。。。

package.jsonを修正する

package.jsonをこのように変更します。

"scripts": {
    "development": "mix",
    "watch": "mix watch",
    "watch-poll": "mix watch -- --watch-options-poll=1000",
    "hot": "mix watch --hot",
    "production": "mix --production"
}

webpack.mix.jsを修正する

僕の場合はここの変更は必要なかったのですが、もしこのようになっていない場合は変更してください。

const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js').vue();

app.jsを修正する

app.jsではvueの呼び出し方とかコンポーネントの登録方法などが変わっています。

import { createApp } from 'vue';
const app = createApp({})

app.component('home-component', require('./components/App/Home.vue').default);

app.mount('#app')

このようにすれば、従来通りコンポーネントを登録して使用することができます。

これだけでLaravel×vueのプロジェクトで vue2からvue3に移行できました！
では、楽しい Laravel×vue3ライフを！