DEV Community

Cover image for Understanding Laravel Blade Components and Slots
AddWeb Solution Pvt Ltd profile image Abodh Kumar
Abodh Kumar for AddWeb Solution Pvt Ltd

Posted on

Understanding Laravel Blade Components and Slots

#laravel #php #laravelblade #laraveltips

"Write once, use everywhere - that’s the magic of Laravel Blade components." - Developer Wisdom

When building applications in Laravel, developers often need a way to organize reusable pieces of code for cleaner and more maintainable views. That’s where Blade components and slots come into play. They allow you to create modular, reusable, and dynamic UI elements without repeating the same code multiple times.

In this article, we’ll explore what Blade components and slots are, why they’re useful, and how to use them effectively.

Table of Contents

  1. What Are Blade Components?
  2. Creating a Blade Component
  3. Using a Blade Component
  4. Understanding Slots 4.0 Default Slot 4.1 Name Slot
  5. Passing Data to Components
  6. Benefits of Using Components and Slots
  7. FAQ’s
  8. Conclusion

1. What Are Blade Components?

Blade components are reusable view templates that encapsulate a small portion of your UI. Instead of writing the same HTML structure multiple times across your views, you can define a component once and reuse it anywhere in your Laravel project.

2. Creating a Blade Component

Laravel provides an Artisan command to generate a component:

   php artisan make:component Alert
Enter fullscreen mode Exit fullscreen mode

This will create two files:

  1. app/View/Components/Alert.php - The PHP class logic for the component.
  2. resources/views/components/alert.blade.php - The Blade view for rendering the component.

3. Using a Blade Component

File: resources/views/components/alert.blade.php

  <div class="alert alert-{{ $type }}">
     {{ $slot }}
  </div>
Enter fullscreen mode Exit fullscreen mode

Here:

  • {{ $type }} is a property passed from the parent view.
  • {{ $slot }} represents the content passed into the component. File: resources/views/welcome.blade.php 
<x-alert type="success">
     Your profile has been updated successfully!
  </x-alert>
Enter fullscreen mode Exit fullscreen mode

Rendered Output:

 <div class="alert alert-success">
     Your profile has been updated successfully!
  </div>
Enter fullscreen mode Exit fullscreen mode

4. Understanding Slots

Slots are one of the most powerful features of Blade components. They allow you to inject dynamic content into a component while still keeping the base structure reusable and clean. Think of a component as a template, and slots as the placeholders where custom content can be inserted.

Laravel supports two main types of slots:

 **4.0 Default Slot** - A single placeholder for the main content.
  **4.1 Named Slots** - Multiple placeholders for different sections of a component.
Enter fullscreen mode Exit fullscreen mode

4.0 Default Slot
The default slot is used when a component needs to render some content inside it, but the layout remains the same.

File: resources/views/components/alert.blade.php

<div class="alert alert-{{ $type }}">
     {{ $slot }}
  </div>
Enter fullscreen mode Exit fullscreen mode
  • {{ $slot }} is the placeholder where content will be injected.
  • The rest of the component (...) stays consistent.

File: resources/views/welcome.blade.php

 <x-alert type="success">
     Profile updated successfully!
  </x-alert>


  <x-alert type="danger">
     Something went wrong, please try again.
  </x-alert>
Enter fullscreen mode Exit fullscreen mode

Rendered Output:

<div class="alert alert-success">
     Profile updated successfully!
  </div>


  <div class="alert alert-danger">
     Something went wrong, please try again.
  </div>
Enter fullscreen mode Exit fullscreen mode

4.1 Named Slots
Sometimes a component needs multiple placeholders for different parts of its layout. This is where named slots are helpful.

File: resources/views/components/card.blade.php

<div class="card">
     <div class="card-header">
         {{ $header }}
     </div>


     <div class="card-body">
         {{ $slot }}
     </div>


     <div class="card-footer">
         {{ $footer ?? '' }}
     </div>
  </div>
Enter fullscreen mode Exit fullscreen mode

Here:

  • {{ $header }} -> A named slot for the card header.
  • {{ $slot }} -> The default slot for the main content.
  • {{ $footer ?? '' }} -> An optional footer slot (will render nothing if not provided).

File: resources/views/welcome.blade.php

<x-card>
     <x-slot name="header">
         User Profile
     </x-slot>


     <p>Welcome to your profile page.</p>


     <x-slot name="footer">
         Last updated: {{ now()->format('d M Y') }}
     </x-slot>
  </x-card>
Enter fullscreen mode Exit fullscreen mode

Rendered Output:

<div class="card">
     <div class="card-header">
         User Profile
     </div>


     <div class="card-body">
         <p>Welcome to your profile page.</p>
     </div>


     <div class="card-footer">
         Last updated: 18 Sep 2025
     </div>
  </div>
Enter fullscreen mode Exit fullscreen mode

"Clean code isn’t just good practice; with Blade components, it’s effortless." - Taylor Otwell

5. Passing Data to Components

You can pass props (data) to components just like attributes.

File: resources/views/welcome.blade.php

 <x-alert type="danger" :message="$errorMessage" />
Enter fullscreen mode Exit fullscreen mode

File: resources/views/components/alert.blade.php

<div class="alert alert-{{ $type }}">
     {{ $message }}
  </div>
Enter fullscreen mode Exit fullscreen mode

File: app/View/Components/Alert.php

<?php


  namespace App\View\Components;


  use Illuminate\View\Component;


  class Alert extends Component
  {
     public $type;
     public $message;


     public function __construct($type, $message)
     {
         $this->type = $type;
         $this->message = $message;
     }


     public function render()
     {
         return view('components.alert');
     }
  }
Enter fullscreen mode Exit fullscreen mode

6. Benefits of Using Components and Slots

- Reusability -> Define once, use anywhere.
- Maintainability -> Update in one place, affect everywhere.
- Readability -> Cleaner Blade files with meaningful tags like instead of complex HTML.
- Flexibility -> Pass dynamic data and slots for customization.

"Blade components make your Laravel templates reusable, clean, and easy to maintain." - Taylor Otwell

7. FAQ’s

Q: Can Blade components include other components?
A: Yes Components are composable. For example, a Card component can include an Alert component inside it. This makes building complex UI layouts much easier.

Q: Can components have default slot values?
A: Yes You can define fallback content for slots.

Q: When should I use slots instead of props?
A: (i) Use props for small data like text, IDs, classes, or flags.
(ii) Use slots when you need to inject larger blocks of HTML or structured content.

Q: Are Blade components compiled or runtime-rendered?
A: Blade components are compiled into plain PHP views by Laravel. This means they are fast, lightweight, and do not add extra performance overhead.

Q: What are some real-world use cases for slots?
A: (i) Modal windows -> header, body, footer slots.
(ii) Navigation bars -> brand/logo, menu, user section slots.
(iii) Cards -> header, body, footer slots.
(iv) Forms -> slot for inputs, buttons, validation messages.

Q: What is the difference between props and slots?
A: (i) Props: Pass simple data (strings, numbers, arrays) from the parent view to the component. Example: type="success".
(ii) Slots: Pass entire blocks of HTML or Blade markup into a component. Example: wrapping custom

or inside a component.

8. Conclusion

Laravel Blade components and slots provide a powerful way to build modular and reusable UI elements. By using them, you keep your Blade views clean, maintainable, and easy to scale as your application grows. Whether it’s buttons, modals, alerts, or entire layout structures, components make your development process more efficient.

About the Author: Abodh is a PHP and Laravel Developer at AddWeb Solution, skilled in MySQL, REST APIs, JavaScript, Git, and Docker for building robust web applications.

Top comments (0)