今年初開催のビットスター Advent Calendar 2021 1日目です。
明日は@kansaizineさんのさくらのクラウドで出来るだけ安価にバックアップサーバを運用する工夫です。

はじめに

認証やフロントエンドのセットアップなどするためlaravel uiなどをいままで使用していたのですが、laravel8からはLaravel BreezeとLaravel Jetstreamが推奨されており、現状最新バージョンでVue.jsを指定してインストールコマンドを実行するとVue3がデフォルトで入ってきます。
ただほかのライブラリなどがまだVue3に対応していないなど様々な理由でVue2で開発せざる得ないなど理由がある場合にどうしたかを備忘録的に書いていきます。

ちなみにBreezeは最初からVue3で作成されており、Jetstreamはv2.2からVue3に対応したようでJetstream v2.2を入れるという手もあると思いますが、依存関係で引っかかってしまうので下記に書いていくやり方がいいかと思います。

環境

PHP v8.0.13
Laravel v8.74.0

内容

Breezeのインストール

composer require laravel/breeze --dev
php artisan breeze:install vue
npm run dev

ドキュメントを参考にLaravel Breezeをインストールし、Vue.jsでインストールを実行します。
この段階ではVue3になっています。

vue2_install

npm uninstall @inertiajs/inertia-vue3 --save-dev
npm install vue@"^2.6.0" --save-dev
npm install @inertiajs/inertia-vue --save-dev
npm install vue-template-compiler --save-dev
npm install portal-vue --save-dev
npm install vue-loader@"^15.9.8" --save-dev

Vue2用にパッケージを入れ替えます。
こちらを参考にしています。

上記を参考にresources/js/app.jsを書き換える

各コンポーネント差分

-import { Link } from '@inertiajs/inertia-vue3';
+import { Link } from '@inertiajs/inertia-vue';

inertia-vue3を削除したので、各コンポーネントでを呼び出している箇所をinertia-vueに変更します。

この状態でnpm run devを実行するとルートエレメントが複数あるとエラーが発生するので各ページ下記のような修正をします。

差分

diff --git a/resources/js/Pages/Welcome.vue b/resources/js/Pages/Welcome.vue
index 33dbf28..8c04ad5 100644
--- a/resources/js/Pages/Welcome.vue
+++ b/resources/js/Pages/Welcome.vue
@@ -1,4 +1,5 @@
 <template>
+<div>
     <Head title="Welcome" />

     <div class="relative flex items-top justify-center min-h-screen bg-gray-100 dark:bg-gray-900 sm:items-center sm:pt-0">
@@ -110,6 +111,7 @@
             </div>
         </div>
     </div>
+</div>
 </template>

 <style scoped>

最後にnpm run devでエラーが発生しなければ大丈夫かと思います。

package.json

参考までにpackage.jsonを下記に記載しておきます。

package.json

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production"
    },
    "devDependencies": {
        "@inertiajs/inertia": "^0.10.0",
        "@inertiajs/inertia-vue": "^0.7.2",
        "@inertiajs/progress": "^0.2.6",
        "@tailwindcss/forms": "^0.2.1",
        "@vue/compiler-sfc": "^3.0.5",
        "autoprefixer": "^10.2.4",
        "axios": "^0.21",
        "laravel-mix": "^6.0.6",
        "lodash": "^4.17.19",
        "portal-vue": "^2.1.7",
        "postcss": "^8.2.13",
        "postcss-import": "^14.0.1",
        "tailwindcss": "^2.1.2",
        "vue": "^2.6.14",
        "vue-loader": "^15.9.8",
        "vue-template-compiler": "^2.6.14"
    }
}

最後に

まだVue2で開発する必要があって、調べても海外のフォーラムでざっくりとしか書いておらず微妙に詰まったので備忘録的に残しておきました。
BreezeやJetstreamでVue2でもインストールできるオプションがあればうれしいのですが需要ないんでしょうか。時期が悪いというか時が解決するような気もしますが...

Laravel BreezeでVue2を使うまでの話

はじめに

環境

内容

package.json

最後に