Laravel BreezeでVue2を使うまでの話

今年初開催の[ビットスター Advent Calendar 2021](https://qiita.com/advent-calendar/2021/bitstar-inc) 1日目です。
明日は@kansaizineさんの[さくらのクラウドで出来るだけ安価にバックアップサーバ](https://qiita.com/kansaizine/items/1ceeae0d17bb22d7da05)を運用する工夫です。

----
# はじめに
認証やフロントエンドのセットアップなどするため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


# 内容

```ruby:Breezeのインストール
composer require laravel/breeze --dev
php artisan breeze:install vue
npm run dev
```

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

```ruby: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用にパッケージを入れ替えます。
[こちら](https://github.com/laravel/jetstream/blob/v2.1.4/src/Console/InstallCommand.php)を参考にしています。

https://github.com/laravel/jetstream/blob/v2.1.4/stubs/inertia/resources/js/app.js

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


```ruby:各コンポーネント差分
-import { Link } from '@inertiajs/inertia-vue3';
+import { Link } from '@inertiajs/inertia-vue';
```
`inertia-vue3`を削除したので、各コンポーネントでを呼び出している箇所を`inertia-vue`に変更します。

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

```ruby:差分
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を下記に記載しておきます。

```ruby: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でもインストールできるオプションがあればうれしいのですが需要ないんでしょうか。時期が悪いというか時が解決するような気もしますが...