Laravel9とVue3で環境構築をしたので、その手順をまとめました。
Laravelのインストール
まずはLaravel9をインストールします。
composer create-project laravel/laravel:^9 example_app --prefer-dist
できたプロジェクトをVSCodeなどで開きます。
そのターミナルで以下のコマンドを叩き、Laravelを起動します。
php artisan serve
するとターミナルに以下のようなメッセージが出てくるので、今回で言うとhttp://127.0.0.1:8001/にアクセスします。
（Failed to listen on 127.0.0.1:8000 (reason: Address already in use). と出ている私の環境では、他のプロジェクトも立ち上げていたので127.0.0.1:8000は使えずhttp://127.0.0.1:8001を使うよ。と言っています。）
アクセス先の画面がLaravelの画面になっていたら成功です。
次に、phpMyAdminでDBを作成してください。
（今回はこちらの詳細は割愛します）
そして初期設定として.env（必要に応じてconfig/database.phpも）とconfig/app.phpファイルを修正し、デバッグバーも入れておきます。
まずは.envとconfig/database.phpでDBに接続できるように修正します。
（私の場合はエラーが出たのでこちらを参考にしています）
APP_NAME=Laravel
APP_ENV=local
APP_KEY=base64:vet1oesu5/ebZ0N5G1zVyEwZp9THivmJlRmmyjD2sjE=
APP_DEBUG=true
APP_URL=http://localhost // 変更
LOG_CHANNEL=stack
LOG_DEPRECATIONS_CHANNEL=null
LOG_LEVEL=debug
DB_CONNECTION=mysql
DB_HOST=localhost
DB_PORT=3306
DB_DATABASE=[phpMyAdminで設定したDB名]
DB_USERNAME=[phpMyAdminで設定したユーザー名]
DB_PASSWORD=[phpMyAdminで設定したパスワード]
DB_SOCKET=/Applications/MAMP/tmp/mysql/mysql.sock // 追加
BROADCAST_DRIVER=log
CACHE_DRIVER=file
FILESYSTEM_DISK=local
QUEUE_CONNECTION=sync
SESSION_DRIVER=file
SESSION_LIFETIME=120
MEMCACHED_HOST=127.0.0.1
REDIS_HOST=127.0.0.1
REDIS_PASSWORD=null
REDIS_PORT=6379
MAIL_MAILER=smtp
MAIL_HOST=mailpit
MAIL_PORT=1025
MAIL_USERNAME=null
MAIL_PASSWORD=null
MAIL_ENCRYPTION=null
MAIL_FROM_ADDRESS="hello@example.com"
MAIL_FROM_NAME="${APP_NAME}"
AWS_ACCESS_KEY_ID=
AWS_SECRET_ACCESS_KEY=
AWS_DEFAULT_REGION=us-east-1
AWS_BUCKET=
AWS_USE_PATH_STYLE_ENDPOINT=false
PUSHER_APP_ID=
PUSHER_APP_KEY=
PUSHER_APP_SECRET=
PUSHER_HOST=
PUSHER_PORT=443
PUSHER_SCHEME=https
PUSHER_APP_CLUSTER=mt1
VITE_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
VITE_PUSHER_HOST="${PUSHER_HOST}"
VITE_PUSHER_PORT="${PUSHER_PORT}"
VITE_PUSHER_SCHEME="${PUSHER_SCHEME}"
VITE_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"
'mysql' => [
'driver' => 'mysql',
'url' => env('DATABASE_URL'),
'host' => env('DB_HOST', '127.0.0.1'),
'port' => env('DB_PORT', '3306'),
'database' => env('DB_DATABASE', 'forge'),
'username' => env('DB_USERNAME', 'forge'),
'password' => env('DB_PASSWORD', ''),
'unix_socket' => '/Applications/MAMP/tmp/mysql/mysql.sock', // 変更
'charset' => 'utf8mb4',
'collation' => 'utf8mb4_unicode_ci',
'prefix' => '',
'prefix_indexes' => true,
'strict' => true,
'engine' => null,
'options' => extension_loaded('pdo_mysql') ? array_filter([
PDO::MYSQL_ATTR_SSL_CA => env('MYSQL_ATTR_SSL_CA'),
]) : [],
],
そして以下コマンドでDBにテーブルを作成します。
php artisan migrate
以下のようにphpMyAdinでテーブルが生成されていたら成功です。
次はconfig/app.phpファイルでタイムゾーン、言語設定を設定します。
'timezone' => 'Asia/Tokyo',
'locale' => 'ja',
'fallback_locale' => 'ja',
'faker_locale' => 'ja_JP',
最後にデバッグを楽にするためにデバッグバーをインストールしておきます。
composer require barryvdh/laravel-debugbar
先ほどのLaravel画面に以下のようにデバッグバーが表示されると成功です。
Vue3をインストール
まずBreeze（vue）をインストールします。
composer require laravel/breeze:^1 --dev
php artisan breeze:install vue
npm install && npm run dev
以下のようにVITEが立ち上がれば成功です。
以上でLaravel9とVue3の環境構築は終了です。
お疲れ様でした！
何か誤りなどございましたらご指摘いただけますと幸いです。