Understanding Laravel Components: Class‑Based and Anonymous Blade Components

Laravel, a popular PHP framework, offers a rich set of tools that simplify web development, including a component system that helps developers handle common tasks efficiently and keep business logic separate from boilerplate code.

Deep Understanding Components

Components are reusable code modules similar to functions; they accept parameters, promote the DRY principle, and improve code maintainability.

There are two ways to create components in Laravel: class‑based components and anonymous components.

1. Class‑Based Components

These components are primarily used in Blade templates to keep view logic clear and maintainable.

Step 1: Create the Component Class

Run the Artisan command:

php artisan make:component Alert

The command generates two files:

app/View/Components/Alert.php – where you define the component's logic.

resources/views/components/alert.blade.php – the Blade view for the component.

Example class:

// app/View/Components/Alert.php

namespace App\View\Components;

use Illuminate\View\Component;

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

    /**
     * Create a new component instance.
     *
     * @param string $type
     * @param string $message
     */
    public function __construct($type, $message)
    {
        $this->type = $type;
        $this->message = $message;
    }

    /**
     * Get the view / contents that represent the component.
     */
    public function render()
    {
        return view('components.alert');
    }
}

Step 2: Create the Blade View

The Blade view defines the HTML structure:

{{ $message }}

Step 3: Use the Component in a Blade Template

Example usage:

You can also pass data using HTML attributes or PHP expressions:

$slot Variable

The $slot variable holds the content placed between the component tags, acting as a flexible placeholder for dynamic content.

2. Anonymous Components

Anonymous components allow you to create Blade components without a corresponding PHP class, ideal for small reusable snippets.

Step 1: Create the Component Blade View

Generate the view with the --view flag:

php artisan make:component alert --view

Step 2: Create the Blade View

{{ $slot }}

Step 3: Use the Anonymous Component

Operation successful!
Something went wrong!

Creating Components with Named Slots

Example of a card component with a named $header slot and the default $slot :

{{ $header }}
{{ $slot }}

Usage with named slots:

Card Title
This is the card body content.

Any content not placed inside an explicit x-slot tag is automatically passed to the default $slot variable.

By leveraging Laravel's component system, you can streamline development, improve code quality, and build reusable UI elements efficiently.