In Laravel Blade, components and slots offer a powerful way to create reusable and modular UI elements. Components allow you to encapsulate a piece of HTML and its associated logic into a reusable unit, while slots provide a way to insert dynamic content into those components.

1. Blade Components

Definition: Blade components are reusable pieces of UI that can be defined and used throughout your application. They help to encapsulate HTML and logic into a single file, making it easier to manage and reuse.

Creating a Blade Component

You can create a Blade component using the make:component Artisan command or manually by creating a new Blade file and a corresponding class.

Using Artisan Command:

php artisan make:component Alert

This command creates a component class Alert in app/View/Components and a Blade view resources/views/components/alert.blade.php.

Manual Creation:

• Component Class: Create a PHP class in app/View/Components.

  Example: app/View/Components/Alert.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');
      }
  }
  

• Component View: Create a Blade view in resources/views/components.

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

  <div class="alert alert-{{ $type }}">
      {{ $message }}
  </div>
  

Using a Blade Component

You can use a Blade component in your views using the component tag syntax.

Example:

<x-alert type="success" message="Operation was successful!" />

This will render the alert component with the type and message attributes passed to it.

2. Slots

Definition: Slots are placeholders within a Blade component that allow you to inject dynamic content. They enable you to pass different content into predefined areas of a component.

Default Slot

The default slot is used when you don’t specify a named slot. It’s the content placed between the component’s opening and closing tags.

Component View:

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

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

Using the Component with Default Slots.

<x-card title="My Card">
    <p>This is the content of the card.</p>
</x-card>

Named Slots

Named slots allow you to define multiple slots within a component and specify where the content should go.

Component View:

Example: resources/views/components/modal.blade.php

<div class="modal">
    <div class="modal-header">
        {{ $header }}
    </div>
    <div class="modal-body">
        {{ $body }}
    </div>
    <div class="modal-footer">
        {{ $footer }}
    </div>
</div>

Using the Component with Named Slots:

<x-modal>
    <x-slot name="header">
        Modal Header
    </x-slot>

    <x-slot name="body">
        This is the body of the modal.
    </x-slot>

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

3. Component Aliases

Blade components can be given aliases for convenience. Instead of using the full class name, you can use a short, simple alias.

Example:

In AppServiceProvider:

use Illuminate\Support\Facades\Blade;

public function boot()
{
    Blade::component('alert', Alert::class);
}

Using the Aliased Component:

<x-alert type="info" message="This is an informational alert." />

4. Component Inheritance

Blade components can also extend other components, allowing you to build upon existing ones.

Base Component View:

Example: resources/views/components/base-card.blade.php

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

Extended Component View:

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

<x-base-card>
    <x-slot name="header">
        Card Header
    </x-slot>
    {{ $slot }}
</x-base-card>

Summary

Blade components and slots in Laravel provide a way to create reusable and modular UI elements. Components encapsulate HTML and logic into single files, while slots allow you to inject dynamic content into these components. This approach enhances code reusability, maintainability, and readability in your Blade templates.