Laravel 11 + Breeze + Vue 3 + Inertia.js のセットアップ

Laravel 11 で Breeze を使用して Vue 3 + Inertia.js をセットアップする方法を解説します。
Breezeは、シンプルな認証機能を提供するパッケージで、Inertia.jsとVue.jsと組み合わせることで、モダンなSPA風のアプリをすぐに構築できます。

---

✅ Breeze + Vue 3 + Inertia.js インストール手順

1. Laravel 11 プロジェクトの作成

まだプロジェクトを作成していない場合は、以下のコマンドで新しく作成します。

composer create-project laravel/laravel my-project
cd my-project

2. Breeze パッケージのインストール

BreezeをComposerでインストールします。

composer require laravel/breeze --dev

3. Breezeのセットアップ

以下のコマンドで Vue + Inertia.js を選択して Breeze をインストールします。

php artisan breeze:install vue

このコマンドを実行すると、自動的に以下の設定が行われます：

• Vue 3 + Inertia.js のセットアップ
• resources/js/Pages/ に Vue のページコンポーネントを作成
• routes/web.php に Inertia のルートを追加
• Breezeの認証機能（ログイン・登録・ログアウトなど）のVueコンポーネントが生成

4. フロントエンドの依存関係をインストール

Breezeのセットアップ後、以下のコマンドでnpmパッケージをインストールします。

npm install

5. Viteの開発サーバーを起動

開発用にViteを起動します。

npm run dev

6. データベースの設定とマイグレーション

.env ファイルを編集して、データベース情報を設定します。

その後、以下のコマンドでマイグレーションを実行します。

php artisan migrate

7. サーバーを起動

Laravelの開発サーバーを起動します。

php artisan serve

ブラウザで http://127.0.0.1:8000 にアクセスすると、ログイン・登録画面が表示されるはずです。🚀

---

✅ Breeze + Vue + Inertia の構成

Breeze をインストールすると、以下のようなファイル構成になります。

my-project/
├── app/
│   ├── Http/
│   │   ├── Controllers/
│   │   │   ├── Auth/
│   │   │   ├── DashboardController.php
│   │   │   └── HomeController.php
│   │   ├── Middleware/
│   │   └── Kernel.php
├── routes/
│   ├── web.php
│   ├── auth.php
├── resources/
│   ├── js/
│   │   ├── Pages/
│   │   │   ├── Auth/      ← ログイン・登録関連
│   │   │   ├── Dashboard.vue
│   │   │   └── Welcome.vue
│   │   ├── app.js
│   │   ├── bootstrap.js
│   │   └── Components/
├── vite.config.js
├── package.json
└── .env

---

✅ カスタマイズのヒント

1. ログイン後のリダイレクト先を変更

デフォルトでは、ログイン後に /dashboard にリダイレクトされます。
変更したい場合は routes/web.php で修正できます。

use Illuminate\Support\Facades\Route;
use Inertia\Inertia;

Route::get('/', function () {
    return Inertia::render('Welcome');
});

// ダッシュボードのルート
Route::middleware(['auth', 'verified'])->get('/dashboard', function () {
    return Inertia::render('Dashboard');
})->name('dashboard');

require __DIR__.'/auth.php';

2. Vue コンポーネントを追加

例えば、新しいページを作成したい場合、
resources/js/Pages/About.vue を作成し、以下のように記述します。

<script setup>
</script>

<template>
  <h1>About Us</h1>
</template>

次に、ルートに追加します。

Route::get('/about', function () {
    return Inertia::render('About');
});

ブラウザで http://127.0.0.1:8000/about にアクセスすると、新しいページが表示されます。

---

🎉 まとめ

これで Laravel 11 + Breeze + Vue 3 + Inertia.js の環境構築が完了しました！ 🚀

手順まとめ

1. Laravel 11 のプロジェクトを作成
2. composer require laravel/breeze --dev でBreezeをインストール
3. php artisan breeze:install vue でBreezeをセットアップ
4. npm install でフロントエンドの依存関係をインストール
5. npm run dev & php artisan serve で開発サーバー起動
6. php artisan migrate でデータベースをセットアップ

---

Breezeはシンプルな認証機能をすぐに利用できるので、カスタマイズして実装を進めていけます！