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

上記のように--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でユーザ登録画面が表示されます。

ユーザ情報を登録すると、ログイン後の画面http://localhost/homeに遷移します。

左上のユーザ名の▼からlogoutを選択し、一旦ログアウトします。

ログインも確認します。
http://localhost/loginでログイン画面が表示されます。
先ほど登録したユーザでログインできることを確認します。

Vue3の動作確認

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

ファイルが更新されたら自動ビルドするように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の内容が表示される

参考記事