[Laravel] Bladeのコンポーネントが呼び出されない

実現したいこと

LaravelのBladeでコンポーネント機能を利用したいです。

前提

laravelの参考書に習い、以下のようなファイル構成を作りました。

resources/views/tweet/index.blade.php

php
1<x-layout title="TOP | つぶやきアプリ">
2    <x-layout.single>
3        <h2 class="text-center text-blue-500 text-4xl font-bold mt-8 mb-8">
4            つぶやきアプリ
5        </h2>
6        <x-tweet.form.post></x-tweet.form.post>
7    </x-layout.single>
8</x-layout>

resources/views/components/layout.blade.php

php
1<!doctype html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport"
6          content="width=device-width, user-scalable=no, initial-scale=1.0,
7          maximum-scale=1.0, minimum-scale=1.0">
8    <meta http-equiv="X-UA-Compatible" content="ie=edge">
9   <!-- <link href="css/app.css" rel="stylesheet">-->
10    @vite('resources/sass/app.scss')
11    <title>{{ $title ?? 'つぶやきアプリ' }}</title>
12</head>
13<body class="bg-gray-50">
14    {{ $slot }}
15</body>
16</html>

resources/views/components/layout/single.blade.php

php
1<div class="flex justify-center">
2    <div class="max-w-screen-sm w-full">
3        {{ $slot }}
4    </div>
5</div>

resources/views/components/tweet/form/post.blade.php

php
1@auth
2<div class="p-4">
3    <form action="{{ route('tweet.create') }}" method="post">
4        @csrf
5        <div class="mt-1">
6            <textarea
7                name="tweet"
8                rows="3"
9                class="focus:ring-blue-400 focus:border-blue-400 mt-1 block
10                w-full sm:text-sm border border-gray-300 rounded-md p-2"
11                placeholder="つぶやきを入力"></textarea>
12        </div>
13        <p class="mt-2 text-sm text-gray-500">
14            140文字まで
15        </p>
16
17        @error('tweet')
18        <x-alert.error>{{ $message }}</x-alert.error>
19        @enderror
20
21        <div class="flex flex-wrap justify-end">
22            <x-element.button>
23                つぶやく
24            </x-element.button>
25        </div>
26    </form>
27</div>
28@endauth

resources/views/components/alert/error.blade.php

php
1<div class"w-full mt-1 mb-2 p-2 bg-red-500
2items-center text-white leading-none lg:rouded-full
3flex lg:inline-flex" role="alert">
4    <svg xmlns="http://www.w3.org/2000/svg" class="h-5
5    w-5" viewBox="0 0 20 20" fill="currentColor">
6        <path fill-rule="evenodd" d="M18 10a8 8 0 11-
7        16 0 8 8 0 0116 0zm-7 4ai 1 0 11-2 0 1 1 0
8        012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1
9        0 00-1-1z" clip-rule="evenodd" />
10    </svg>
11    <span class="font-semibold mr-2 text-left flex-auto pl-1">
12        {{ $slot }}
13    </span>
14</div>

resources/views/components/element/button.blade.php

php
1<button
2    type="submit"
3    class="inline-flex justify-center py-2 px-4 border border-transparent
4    shadow-sm text-sm font-medium rounded-md text-white bg-blue-500
5    hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2
6    focus:ring-blue-500"
7>
8    {{ $slot }}
9</button>

エラー

ブラウザのディベロッパーツールで見たところ以下のように出力されました。
<x-tweet.form.post>a</x-tweet.form.post>の部分が出力されていません。

php
1<html lang="ja"><head>
2    <meta charset="UTF-8">
3    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0,
4          maximum-scale=1.0, minimum-scale=1.0">
5    <meta http-equiv="X-UA-Compatible" content="ie=edge">
6   <!-- <link href="css/app.css" rel="stylesheet">-->
7    <link rel="preload" as="style" href="http://localhost/build/assets/app-3f1c4ee8.css"><link rel="stylesheet" href="http://localhost/build/assets/app-3f1c4ee8.css">    <title>TOP | つぶやきアプリ</title>
8</head>
9<body class="bg-gray-50">
10    <div class="flex justify-center">
11    <div class="max-w-screen-sm w-full">
12        <h2 class="text-center text-blue-500 text-4xl font-bold mt-8 mb-8">
13            つぶやきアプリ
14        </h2>
15    </div>
16</div>
17
18
19</body></html>

依存関係

resources/views/tweet/index.blade.php
↑
resources/views/components/layout.blade.php、resources/views/components/layout/single.blade.php、
resources/views/components/tweet/form/post.blade.php
↑
resources/views/components/alert/error.blade.php、
resources/views/components/element/button.blade.php
(resources/views/components/tweet/form/post.blade.phpに)

試したこと

・resources/views/components/tweet/form/post.blade.php
の場所をresources/views/components/tweet/post.blade.phpにして
参照を、<x-tweet.post></x-tweet.post>にした。

・resources/views/tweet/index.blade.phpの
<x-tweet.form.post></x-tweet.form.post>の部分を
<x-tweet.form.post>a</x-tweet.form.post>として
resources/views/components/tweet/form/post.blade.php
にスロット{{ $slot }}を導入してみた

いずれも改善は見られなかった。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。
Laravel Framework 10.13.5
VITE v4.3.9

行動規範の内容に同意します

回答1件

ベストアンサー

この回答はGPT-4による自動生成回答です

原因は、resources/views/components/tweet/form/post.blade.php の @auth と @endauth で囲まれた部分が、ログインしていない場合に表示されないためです。

ログインしていない場合にもフォームを表示させたい場合は、@auth と @endauth を削除してください。

もし、ログインしている場合のみフォームを表示させたいのであれば、ログイン状態を確認してからページにアクセスしてください。

修正後の resources/views/components/tweet/form/post.blade.php は以下のようになります。

php
1<div class="p-4">
2    <form action="{{ route('tweet.create') }}" method="post">
3        @csrf
4        <div class="mt-1">
5            <textarea
6                name="tweet"
7                rows="3"
8                class="focus:ring-blue-400 focus:border-blue-400 mt-1 block
9                w-full sm:text-sm border border-gray-300 rounded-md p-2"
10                placeholder="つぶやきを入力"></textarea>
11        </div>
12        <p class="mt-2 text-sm text-gray-500">
13            140文字まで
14        </p>
15
16        @error('tweet')
17        <x-alert.error>{{ $message }}</x-alert.error>
18        @enderror
19
20        <div class="flex flex-wrap justify-end">
21            <x-element.button>
22                つぶやく
23            </x-element.button>
24        </div>
25    </form>
26</div>