の続き。
このバージョンから認証スケルトンはlaravel breezeが推奨となる。

composer require laravel/breeze --dev
Cannot use laravel/breeze's latest version v1.23.0 as it requires php ^8.1.0 which is not satisfied by your platform.
./composer.json has been updated
Running composer update laravel/breeze
Loading composer repositories with package information
Updating dependencies
Lock file operations: 1 install, 0 updates, 0 removals
  - Locking laravel/breeze (v1.10.0)

まあ、なんかゴチャゴチャいってるけど気にしないで。

php artisan breeze:install --help
Description:
  Install the Breeze controllers and resources

Usage:
  breeze:install [options] [--] [<stack>]

Arguments:
  stack                      The development stack that should be installed (blade,react,vue,api) [default: "blade"]

Options:
      --inertia              Indicate that the Vue Inertia stack should be installed (Deprecated)
      --pest                 Indicate that Pest should be installed
      --ssr                  Indicates if Inertia SSR support should be installed
      --composer[=COMPOSER]  Absolute path to the Composer binary which should be used to install packages [default: "global"]
  -h, --help                 Display help for the given command. When no command is given display help for the list command
  -q, --quiet                Do not output any message
  -V, --version              Display this application version
      --ansi|--no-ansi       Force (or disable --no-ansi) ANSI output
  -n, --no-interaction       Do not ask any interactive question
      --env[=ENV]            The environment the command should run under
  -v|vv|vvv, --verbose       Increase the verbosity of messages: 1 for normal output, 2 for more verbose output and 3 for debug

普通にbreeze:installする

php artisan breeze:install
Breeze scaffolding installed successfully.
Please execute the "npm install" && "npm run dev" commands to build your assets.

        modified:   app/Providers/RouteServiceProvider.php
        modified:   composer.json
        modified:   composer.lock
        modified:   package.json
        modified:   resources/css/app.css
        modified:   resources/js/app.js
        modified:   resources/views/welcome.blade.php
        modified:   routes/web.php

Untracked files:
  (use "git add <file>..." to include in what will be committed)
        app/Http/Controllers/Auth/
        app/Http/Requests/
        app/View/
        postcss.config.js
        resources/views/auth/
        resources/views/components/
        resources/views/dashboard.blade.php
        resources/views/layouts/
        routes/auth.php
        tailwind.config.js
        tests/Feature/Auth/
        vite.config.js

laravel uiとbreezeなので大分異なってはいるが、

resources/views/auth/login.blade.php

<x-guest-layout>
    <x-auth-card>
        <x-slot name="logo">
            <a href="/">
                <x-application-logo class="w-20 h-20 fill-current text-gray-500" />
            </a>
        </x-slot>

        <!-- Session Status -->
        <x-auth-session-status class="mb-4" :status="session('status')" />

        <!-- Validation Errors -->
        <x-auth-validation-errors class="mb-4" :errors="$errors" />

        <form method="POST" action="{{ route('login') }}">
            @csrf

中は普通にbladeだったりする(defaultでは)ただ、<x-guest-layout>など、ちょっと変わった書き方が見えるのがわかる。これはcomponent機能(この機能自体はlaravel7〜)を利用しており、bladeを使いつつもややreactみたいなコンポーネント指向に何とかかんとか近付けたいというのが見て取れるだろう。

installされるnpmパッケージ

laravel breezeだけになっている

         "facade/ignition": "^2.5",
         "fakerphp/faker": "^1.9.1",
+        "laravel/breeze": "^1.10",
         "laravel/sail": "^1.0.1",
         "mockery/mockery": "^1.4.4",
         "nunomaduro/collision": "^5.10",

vite

このバージョンからviteのconfig (vite.config.js) が見えるが、まだデフォルトはlarvel mixである。viteはoptionalという扱いだろうか

    "scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production"
    },

viteとかはよほどフロントエンドの意識が強くないとまず使わないだろうみたいな所もあった。

さらに認証リダクレクトの先が /home から /dashboardに変更してたりとか細かいのはあるんだけど、基本的にはまだそんなに変わってない、いや、breezeで大幅に変わったといえばそうなんだけど…

js周り

resources/js/bootstrap.js

window._ = require('lodash');

/**
 * We'll load the axios HTTP library which allows us to easily issue requests
 * to our Laravel back-end. This library automatically handles sending the
 * CSRF token as a header based on the value of the "XSRF" token cookie.
 */

window.axios = require('axios');

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

/**
 * Echo exposes an expressive API for subscribing to channels and listening
 * for events that are broadcast by Laravel. Echo and event broadcasting
 * allows your team to easily build robust real-time web applications.
 */

// import Echo from 'laravel-echo';

// window.Pusher = require('pusher-js');

// window.Echo = new Echo({
//     broadcaster: 'pusher',
//     key: process.env.MIX_PUSHER_APP_KEY,
//     cluster: process.env.MIX_PUSHER_APP_CLUSTER,
//     forceTLS: true
// });

つまり、jqueryとかpopperとかその辺が完全に排除されて呼びこんでいるのはlodashとaxiosだけになった。これは要するにbootstrap.jpには何も変化がないという事なんだけど resources/js/app.js に変化がある

import './bootstrap';

import Alpine from 'alpinejs';

window.Alpine = Alpine;

Alpine.start();

このように、ひっそりとalpine.jsが使われていたりするのであーる。だからalpineを使いたい人は特に何もせず使えるし、何も知らなければ何も起きないという…

css周り

+@tailwind base;
+@tailwind components;
+@tailwind utilities;

tailwind cssの設定が書かれている。tailwind cssはさらに

const defaultTheme = require('tailwindcss/defaultTheme');

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

    theme: {
        extend: {
            fontFamily: {
                sans: ['Nunito', ...defaultTheme.fontFamily.sans],
            },
        },
    },

    plugins: [require('@tailwindcss/forms')],
};

こういった設定も置いていく。

tailwindに関しては

とかを見てみてね

まとめ

laravel8で laravel uiを非推奨としてlaravel breezeが登場した。そこではbootstrap(とjquery)が廃止しており、変わりにalpine.jsとtailwind cssが導入される。viteのconfigが見られるが、まだviteには本格的に以降しておらずlaravel mix(webpack)が使われているという事である。

続いてlaravel9を見ていこう。