laravel + vue に breeze - inertia なし

(2025-02-20)

chatGPT の言うように breeze をインストールしたところ、inertia というものが一緒にインストールされました。

まだ右も左もわからないのに更にややこしい要素が増えるのは混乱の元なので、この inertia なしでもう一度プロジェクトを作成します。

プロジェクト作成

composer create-project laravel/laravel laravue
cd laravue
npm install vue
npm install
npm install @vitejs/plugin-vue
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

composer require laravel/breeze --dev
php artisan breeze:install #ここを変更
npm install

npm run build

web.php

このようにすると web.php はぐっとスッキリします。

<?php

use App\Http\Controllers\ProfileController;
use Illuminate\Support\Facades\Route;

Route::get('/', function () {
    return view('welcome');
});

Route::get('/dashboard', function () {
    return view('dashboard');
})->middleware(['auth', 'verified'])->name('dashboard');

Route::middleware('auth')->group(function () {
    Route::get('/profile', [ProfileController::class, 'edit'])->name('profile.edit');
    Route::patch('/profile', [ProfileController::class, 'update'])->name('profile.update');
    Route::delete('/profile', [ProfileController::class, 'destroy'])->name('profile.destroy');
});

require __DIR__.'/auth.php';

各ファイル設定

とても難しいのでもう一度。
構造は以下のようになっています。7つのファイルを設定する必要があります。

.
├── resources
│   ├── js
│   │   ├── app.js
│   │   └── components
│   │       └── HelloWorld.vue
│   └── views
│       ├── home.blade.php
│       └── layouts
│           └── app.blade.php
├── routes
│   └── web.php
├── tailwind.config.js
└── vite.config.js

resources/views/home.blade.php

@extends('layouts.app')

@section('content')
    <hello-world></hello-world>
@endsection

resources/views/layouts/app.blade.php

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Laravel + Vue + Tailwind</title>
    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body>
    <div id="app">
        <!-- ここにVueのコンポーネントが表示される -->
        @yield('content')
    </div>
</body>
</html>

resources/js/components/HelloWorld.vue

<template>
    <div class="p-6 bg-blue-500 text-white rounded-lg">
        <h1 class="text-xl font-bold">Hello from Vue!</h1>
        <button class="mt-2 px-4 py-2 bg-white text-blue-500 rounded shadow" @click="count++">
            Clicked {{ count }} times
        </button>
    </div>
</template>

<script setup>
import { ref } from 'vue';
const count = ref(0);
</script>

resources/js/app.js に Vue を登録します。

import { createApp } from 'vue';
import HelloWorld from './components/HelloWorld.vue';

const app = createApp({});
app.component('hello-world', HelloWorld);
app.mount('#app');

vite.cofing.js

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
        vue(),
    ],
    resolve: {
        alias: {
            'vue': 'vue/dist/vue.esm-bundler.js',
        },
    },
});

tailwind.cofing.js

import defaultTheme from 'tailwindcss/defaultTheme';
import forms from '@tailwindcss/forms';

/** @type {import('tailwindcss').Config} */
export default {
    content: [
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
        './resources/js/**/*.vue',
    ],

    theme: {
        extend: {
            fontFamily: {
                sans: ['Figtree', ...defaultTheme.fontFamily.sans],
            },
        },
    },
    plugins: [forms],
};

ルーティング。

<?php

use App\Http\Controllers\ProfileController;
use Illuminate\Support\Facades\Route;

Route::get('/home', function () {
    return view('home');
})->name('home');

Route::get('/', function () {
    return view('welcome');
});

Route::get('/dashboard', function () {
    return view('dashboard');
})->middleware(['auth', 'verified'])->name('dashboard');

Route::middleware('auth')->group(function () {
    Route::get('/profile', [ProfileController::class, 'edit'])->name('profile.edit');
    Route::patch('/profile', [ProfileController::class, 'update'])->name('profile.update');
    Route::delete('/profile', [ProfileController::class, 'destroy'])->name('profile.destroy');
});

require __DIR__.'/auth.php';

サーバー起動

cd ~/laravue

php artisan config:clear
php artisan cache:clear
php artisan view:clear
php artisan route:clear
npm run build

php artisan serve

http://127.0.0.1:8000/home