A conversation-based guide that clears the confusion between Blade template inheritance and Blade components.
The Problem That Started It All
While building a Laravel app, the <main> content area was blank on all pages — dashboard, product index, everywhere. The layout file had @yield('content') but the views were using <x-app-layout> (Blade component syntax). Two different systems were mixed up, and since they don’t talk to each other, the content never rendered.
This led to a series of questions that cleared up the confusion completely.
Q&A
Q: So basically @yield is the empty space in which we fill the content defined in @section? Correct?
Yes, exactly.
@yield('content') defines a placeholder in the layout, and @section('content') ... @endsection in a child view fills that placeholder. This is the @extends / @section / @yield pattern — also called Blade template inheritance.
But views using <x-app-layout> use the Blade component pattern, which is a different system entirely:
- Content inside
<x-app-layout>...</x-app-layout>goes to$slot - Named slots like
<x-slot name="header">go to$header
Two separate systems, easy to mix up. The layout was using @yield but the views were feeding $slot — so nothing ever matched.
Q: So @yield is a placeholder filled by @section, and $slot is also a placeholder?
Yes, both are placeholders — but for different systems:
| Placeholder | Filler | |
|---|---|---|
| Blade Inheritance | @yield('name') | @section('name') ... @endsection |
| Blade Components | {{ $slot }} | Content inside <x-component>...</x-component> |
The key difference is how you use the layout:
@extends('layouts.app')→ use@yield/@section<x-app-layout>→ use{{ $slot }}/<x-slot>
Same concept (placeholder + filler), different syntax depending on which approach you choose.
Q: That means I can define <x-slot name=""> in any order, but since $slot is used in the proper position in the component file, it will render the proper layout. Correct?
Yes, exactly right.
For example, even if you wrote the header slot after the main content:
<x-app-layout>
<div class="py-12">Main content here</div>
<x-slot name="header">
<h2>Dashboard</h2>
</x-slot>
</x-app-layout>
The header slot would still render in the <header> section and the main content would still render inside <main> — because the component template (app-layout.blade.php) controls where each slot is placed, not the order you define them in the view.
Q: Now <x-slot name="header"> is defined — that means when we render $slot in the component file, the header will not be included?
Yes, correct.
Named slots like <x-slot name="header"> are extracted out of the default $slot. So:
$slot→ everything inside<x-app-layout>except named slots$header→ only what’s inside<x-slot name="header">
So in dashboard.blade.php:
<x-app-layout>
<x-slot name="header"> <!-- goes to $header -->
<h2>Dashboard</h2>
</x-slot>
<div class="py-12">...</div> <!-- goes to $slot -->
</x-app-layout>
{{ $slot }} only renders the <div class="py-12"> part. The header is separately rendered via {{ $header }} wherever it’s placed inside the component template.
Summary Table: When to Use What
| Scenario | Layout approach | Placeholder | Filler |
|---|---|---|---|
Using @extends in child view | Blade Inheritance | @yield('content') | @section('content') ... @endsection |
Using <x-component> in child view | Blade Components | {{ $slot }} | Content directly inside the component tags |
| Named regions (header, footer, etc.) with Inheritance | Blade Inheritance | @yield('header') | @section('header') ... @endsection |
| Named regions with Components | Blade Components | {{ $header }} | <x-slot name="header"> ... </x-slot> |
The Golden Rule
Never mix the two systems. If your views use
<x-layout>, your layout file must use{{ $slot }}. If your views use@extends('layout'), your layout file must use@yield('section-name').
Mixing them — like having @yield in a layout rendered by a component class — is exactly what caused the blank page in the first place.
Components are best for reusable UI pieces — things like buttons, cards, alerts, modals that you drop in at multiple places in multiple positions.
Blade Inheritance (@extends / @yield) is best for page layouts — a consistent shell (nav, footer, sidebar) that multiple pages share.
The interesting thing is Laravel Breeze uses <x-app-layout> as a component for the layout too — which is valid, just a different style. Both approaches can handle layouts, but the intent is:
| Use | Best Approach |
|---|---|
| Reusable UI pieces (button, card, modal) | Components (<x-component>) |
| Page layout shell (nav, footer) | Blade Inheritance (@extends) |
| Page layout shell (alternative) | Layout Component (<x-app-layout>) |
So your instinct is right — repetition across multiple places is the signal to reach for a component.