【Laravel】Breeze + InertiaでフロントエンドをSPA化する

やりたいこと

LaravelプロジェクトにLaravel BreezeとInertiaを導入して、フロントエンドをSPA化していきます。

動作環境

• PC：Macbook
• CPU：Intel
• OS：MacOS Ventura 13.4
• Laravel：Laravel9.x, Sail

導入

1. Laravel Breezeをインストール

以下のコマンドを実行します。

$ sail composer require laravel/breeze --dev

2. Inertiaを導入する

以下のコマンドを実行します。
フロントエンドにReactとVue.jsのどちらを使用するかでコマンドが異なります。

# Vue.jsを使用する場合
$ sail php artisan breeze:install vue

# Reactを使用する場合
$ sail php artisan breeze:install react

# nodeパッケージをインストール（上のコマンド内で実行される場合は不要）
$ npm install

実行

以下のコマンドを実行してフロントエンドのサーバを立ち上げることができます。

$ npm run dev

以上です。