laravel9 laravel/uiで認証画面作成 、フロントエンドをVue2からVue3に変更

laravel/uiで認証画面を作成します。
フロントエンドのスカフォールドとしてvueを選択しますが、デフォルトではVue2がインストールされるので、Vue3に変更します。


# 開発環境
この記事の内容は、以下の環境で確認しています。

#### 環境
macOS Monterey
docker desktop 4.5.0
Laravel Framework 9.6.0

#### 前提
* docker desktopがインストール済み、起動済み
* 以下の手順で、Laravel Sailを使ってlaravel9のプロジェクトが作成済み
  https://qiita.com/naporitan/items/a99250a9791fe359740d
* 対象のLaravel Sail環境において、全てのDockerコンテナが起動済み



# 手順
### laravel/uiをインストール
```
sail composer require laravel/ui
```

### ログイン／ユーザー登録スカフォールドを生成(フロントエンドにvueを選択)
```
sail artisan ui vue --auth
```

:::note info
上記のように--auth をつけると、認証画面のViewやControllerなどが生成されます。
認証画面が不要な場合は、
sail artisan ui vue
で、vueの基本的なスカフォールドだけが生成されます。
:::

### テーブル作成
```
sail artisan migrate
```

### インストールするVueのライブラリをVue2からVue3に変更
package.jsonの、以下のVue2関連パッケージの記述を削除
```package.json
"vue": "^2.6.12",
"vue-template-compiler": "^2.6.12"
```
vue3をインストール
```
sail npm install -save-dev vue@next
```
(この記事では不要ですが、vue-routerもインストールする場合は)
```
sail npm install --save-dev vue-router
```
> 私の環境では、`sail npm install -save-dev vue@next`を実行した時に、
> `npm ERR! code ERR_SSL_DECRYPTION_FAILED_OR_BAD_RECORD_MAC`
> というエラーが出ました。
> 根本的な解決にはなっていないのかもしれませんが、セキュリティソフトを一時的にOFFにして再実行したところ、エラーが出ることなく実行できました。

一応、vueのバージョンを確認
```
% sail npm list vue
```
> → `` vue@3.2.31 `` がインストールされている


依存パッケージをインストール、CSS/JSをビルド
```
sail npm install  && sail npm run dev
```
以下のメッセージが表示される
```
Additional dependencies must be installed. This will only take a moment.
Running: npm install vue-loader@^16.2.0 --save-dev --legacy-peer-deps
Finished. Please run Mix again.
```
言われた通りに、再度`npm run dev`を実行
```
sail npm run dev
```
> → css、jsがビルドされる。public/js/app.js、public/css/app.cssが生成されている

### Vue2からVue3の書き方に変更
`resources/js/app.js`を下記のように変更
```
require('./bootstrap');

import { createApp } from 'vue'
import ExampleComponent from './components/ExampleComponent.vue'

createApp({
    components:{
        ExampleComponent
    }
}).mount('#app')
```

# ログイン／ユーザー登録の動作確認
`http://localhost/register`でユーザ登録画面が表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/659480/3c2af357-712a-00ac-8dc0-c49b529003e2.png)
ユーザ情報を登録すると、ログイン後の画面`http://localhost/home`に遷移します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/659480/8de63084-7ca2-a969-ee5e-ecd52d7bcd78.png)
左上のユーザ名の▼からlogoutを選択し、一旦ログアウトします。

ログインも確認します。
`http://localhost/login`でログイン画面が表示されます。
先ほど登録したユーザでログインできることを確認します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/659480/b5c175be-ecfb-a42f-8f29-8e99f0dbf386.png)

# Vue3の動作確認
ログイン後に遷移するHOME画面にExampleComponentを表示してみます。
ここまでの手順通りの場合、ExampleComponentは`resources/js/components/ExampleComponent.vue`に自動生成されています。

<br>

ファイルが更新されたら自動ビルドするように`npm run watch`を実行しておく
```
sail npm run watch
```

home.blade.phpの`@endsection`の手前あたりにExampleComponentを追加

```resources/views/home.blade.php
・・・・・省略・・・・・

</div>
<example-component></example-component> {{-- 追加 --}}
@endsection
```

ログイン後に遷移するHOME画面`http://localhost/home`に、ExampleComponentの内容が表示される
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/659480/4fdbbc49-c52b-e0d3-b2ea-8124fe468f67.png)



# 参考記事
https://readouble.com/laravel/9.x/ja/frontend

https://reffect.co.jp/laravel/laravel8-vue3#Vue_3