Components and slots in Laravel - Step-by-Step Execution

Concept Flow - Components and slots

Define Component

↓

Use Component in View

↓

Pass Content to Slots

↓

Render Component with Slot Content

↓

Display Final HTML Output

This flow shows how a Laravel component is defined, used in a view, receives slot content, and renders the final HTML.

Execution Sample

Laravel

<x-alert>
  <x-slot name="title">Warning!</x-slot>
  This is an alert message.
</x-alert>

This code uses a Laravel component 'alert' and passes content to its 'title' slot and default slot.

Execution Table

Step	Action	Component State	Slot Content	Rendered Output
1	Start rendering <x-alert>	Component alert initialized	No slots yet	<div class="alert">...waiting for slots...</div>
2	Pass slot 'title' with content 'Warning!'	alert with title slot	title: 'Warning!'	<div class="alert"><strong>Warning!</strong> ...</div>
3	Pass default slot content 'This is an alert message.'	alert with title and default slot	title: 'Warning!', default: 'This is an alert message.'	<div class="alert"><strong>Warning!</strong> This is an alert message.</div>
4	Render final component output	alert fully rendered	title and default slots filled	<div class="alert"><strong>Warning!</strong> This is an alert message.</div>

💡 All slots passed and component fully rendered with content

Variable Tracker

Variable	Start	After Step 2	After Step 3	Final
component	alert (empty)	alert (title slot set)	alert (title and default slots set)	alert (rendered HTML)
slots	{}	{title: 'Warning!'}	{title: 'Warning!', default: 'This is an alert message.'}	{title: 'Warning!', default: 'This is an alert message.'}
output	"<div class=\"alert\">...waiting for slots...</div>"	"<div class=\"alert\"><strong>Warning!</strong> ...</div>"	"<div class=\"alert\"><strong>Warning!</strong> This is an alert message.</div>"	"<div class=\"alert\"><strong>Warning!</strong> This is an alert message.</div>"

Key Moments - 2 Insights

Why do we use named slots like <x-slot name="title"> instead of just passing content directly?

Named slots let you place different pieces of content in specific parts of the component. The execution_table shows at Step 2 how the 'title' slot is set separately from the default content at Step 3.

What happens if we don't pass content for a slot?

If a slot is not passed, the component uses default content or leaves that part empty. The variable_tracker shows slots start empty and only fill when content is passed.

Visual Quiz - 3 Questions

Look at the execution_table at Step 3. What slot content has been passed to the component?

A Only the default slot content

B Only the 'title' slot content

C Both 'title' and default slot content

D No slot content yet

💡 Hint

Check the 'Slot Content' column at Step 3 in the execution_table

At which step does the component render the final HTML output?

A Step 1

B Step 4

C Step 2

D Step 3

💡 Hint

Look at the 'Rendered Output' column in the execution_table for the final HTML

If we remove the <x-slot name="title"> block, how would the variable_tracker change?

A The 'title' slot would remain empty throughout

B The 'default' slot would be empty

C The component variable would be empty

D The output would be empty

💡 Hint

Refer to the 'slots' row in variable_tracker and how slots fill when content is passed

Concept Snapshot

Laravel Components and Slots:
- Define reusable components with <x-component> tags
- Pass content to named slots using <x-slot name="slotName">
- Default slot content goes directly inside component tags
- Component renders with slots replaced by passed content
- Slots allow flexible, organized content placement

Full Transcript

This visual trace shows how Laravel components and slots work together. First, a component is defined and used in a view. Then, named slots like 'title' receive specific content, while default slot content is passed directly inside the component tags. The component combines these slots and renders the final HTML output. Variables track the component state, slot content, and output at each step. Key moments clarify why named slots are useful and what happens if slots are missing. The quiz tests understanding of slot content passing and rendering steps.

Practice

1. What is the main purpose of using components in Laravel Blade?

easy

A. To define routes for the application

B. To write raw PHP code inside Blade templates

C. To create reusable pieces of UI that can be included in multiple views

D. To connect Laravel with external databases

Solution

1. Step 1: Understand what components do

   Components in Laravel Blade are designed to hold reusable UI parts, like buttons or cards, so you don't repeat code.

2. Step 2: Compare options with component purpose

   Only To create reusable pieces of UI that can be included in multiple views describes reusable UI pieces. Other options describe unrelated tasks.

3. Final Answer:

   To create reusable pieces of UI that can be included in multiple views -> Option C

4. Quick Check:

   Components = reusable UI [OK]

Hint: Components = reusable UI blocks in Blade templates [OK]

Common Mistakes:

• Confusing components with routing or database tasks
• Thinking components are for PHP logic only
• Assuming components are only for styling

2. Which of the following is the correct syntax to pass a slot named header to a Laravel Blade component called card?

easy

A. Title

B. Title

C.

D. Title

Solution

1. Step 1: Recall named slot syntax in Blade

   Named slots use <x-slot name="slotName">...</x-slot> inside the component tags.

2. Step 2: Match syntax with options

   <x-card><x-slot name="header">Title</x-slot></x-card> correctly uses <x-slot name="header">. Others misuse slot attribute or tag.

3. Final Answer:

   <x-card><x-slot name="header">Title</x-slot></x-card> -> Option A

4. Quick Check:

   Named slot syntax = <x-slot name="name"> [OK]

Hint: Use for named slots inside components [OK]

Common Mistakes:

• Using slot attribute instead of tag
• Confusing slot with regular HTML <slot> tag
• Passing slot content as a component attribute

3. Given this Blade component usage:

<x-alert>
  <x-slot name="title">Warning</x-slot>
  This is an alert message.
</x-alert>

And the component template:

<div class="alert">
  <h4>{{ $title }}</h4>
  <p>{{ $slot }}</p>
</div>

What will be the rendered HTML output?

medium

A. WarningThis is an alert message.

B. Warning This is an alert message.

C. titleThis is an alert message.

D. Warning

Solution

1. Step 1: Understand slot and named slot usage

   The $title variable receives content from the named slot title. The default $slot holds the inner content outside named slots.

2. Step 2: Match passed content to template placeholders

   The title slot is "Warning", and the default slot is "This is an alert message." so they fill <h4> and <p> respectively.

3. Final Answer:

   <div class="alert"><h4>Warning</h4><p>This is an alert message.</p></div> -> Option A

4. Quick Check:

   Named slot fills $title, default slot fills $slot [OK]

Hint: Named slots fill variables, default slot fills $slot content [OK]

Common Mistakes:

• Confusing default slot with named slot content
• Expecting named slot content inside $slot variable
• Ignoring that $title is set by named slot

4. Identify the error in this Blade component usage:

<x-modal>
  <x-slot name="footer">Close</x-slot>
  <x-slot>Content here</x-slot>
</x-modal>

What is the problem?

medium

A. Named slots cannot be used inside components

B. The slot name "footer" is reserved and cannot be used

C. Slots must be self-closing tags

D. The unnamed slot is incorrectly declared with <x-slot> instead of using default slot syntax

Solution

1. Step 1: Check unnamed slot syntax

   The default slot content should be placed directly inside the component tags, not wrapped in <x-slot> without a name.

2. Step 2: Understand correct default slot usage

   Using <x-slot> without a name is invalid. Default slot content is just plain content inside the component.

3. Final Answer:

   The unnamed slot is incorrectly declared with <x-slot> instead of using default slot syntax -> Option D

4. Quick Check:

   Default slot = direct content, not tag [OK]

Hint: Default slot is plain content, not wrapped in [OK]

Common Mistakes:

• Wrapping default slot content in without name
• Thinking all slots must be named
• Believing slots must be self-closing

5. You want to create a reusable profile-card component that accepts a header slot for the user's name, a default slot for the bio, and a footer slot for action buttons. Which Blade component template correctly supports these slots?

hard

A.
{{ $slot }}
{{ $header }}
{{ $footer }}

B.
{{ $header }}
{{ $slot }}
{{ $footer }}

C.
{{ $header }}
{{ $footer }}
{{ $slot }}

D.
{{ $footer }}
{{ $slot }}
{{ $header }}

Solution

1. Step 1: Match slots to variables

   The named slots header and footer correspond to $header and $footer. The default slot content is in $slot.

2. Step 2: Verify correct placement in template

   <div class="profile-card"> <header>{{ $header }}</header> <section>{{ $slot }}</section> <footer>{{ $footer }}</footer> </div> places $header in <header>, $slot in <section>, and $footer in <footer>, matching the requirement.

3. Final Answer:

   <div class="profile-card"> <header>{{ $header }}</header> <section>{{ $slot }}</section> <footer>{{ $footer }}</footer> </div> -> Option B

4. Quick Check:

   Named slots = $header/$footer, default slot = $slot [OK]

Hint: Named slots = variables, default slot = $slot in template [OK]

Common Mistakes:

• Mixing up slot variable names and their placement
• Using $slot for named slots
• Placing slots in wrong HTML sections