How to Use Blade Components In Laravel 10?

Hello Dev,

I will explain step by step tutorial on how to create a layout using blade components in Laravel 10. We will look at the example of how to use blade components in Laravel 10. it's a simple example of how to create a reusable blade template in Laravel 10. step by step explain blade components for your layout.

What Are Laravel Blade Components?

Laravel Blade components are reusable, self-contained building blocks for your views. They allow you to encapsulate UI elements, making your code cleaner, more maintainable, and promoting the concept of “Don’t Repeat Yourself” (DRY). Components are incredibly versatile and can represent anything from simple buttons to complex form elements.

Step 1: Set Up a Laravel Project

Before delving into Blade components, make sure you have set up a Laravel project. You can use Composer to initiate a new Laravel project.

composer create-project --prefer-dist laravel/laravel blade-component
cd blade-component

Step 2: Create a Blade Component

Now, let's generate our inaugural Blade component by running the following Artisan command.

php artisan make:component Button

"Executing this command will establish a fresh directory in your resources/views/components folder, containing a Blade view (button.blade.php) and a corresponding PHP class (Button.php) within the View/Components directory.

Step 3: Define the Component Blade View

Navigate to the button.blade.php file located in the resources/views/components directory. Within this file, define the HTML structure and any required logic for your button component. For instance

<button {{ $attributes->merge(['class' => 'bg-blue-500 text-white']) }}>
    {{ $slot }}
</button>

In this illustration, we leverage the $attributes variable to merge any extra attributes provided to the component. The $slot variable denotes the content inserted within the component when utilized in a view.

Step 4: Use the Blade Component

With our component now defined, let's incorporate it into a view. Open any Blade view (e.g., resources/views/welcome.blade.php) and include your component using the <x> directive.

<x-button>
    Click Me
</x-button>

The text “Click Me” will be rendered inside the button component.

Step 5: Reusable Components with Parameters

Frequently, you may find the need to pass parameters to your components for customization. For instance, let's enhance our button component to allow the modification of its color.

<x-button color="red">
    Danger
</x-button>

To accomplish this, access the Button.php class in the View/Components directory and declare a public property named 'color.

<?php

namespace App\View\Components;

use Closure;
use Illuminate\Contracts\View\View;
use Illuminate\View\Component;

class Button extends Component
{
    public $color;

    /**
    * Create a new component instance.
    */
    public function __construct($color = 'red')
    {
        $this->color = $color;
    }

    /**
    * Get the view / contents that represent the component.
    */
    public function render(): View|Closure|string
    {
        return view('components.button');
    }
}

Now, you can use the $color property inside the button.blade.php view.

<button {{ $attributes->merge(['class' => 'bg-' . $color . ' text-white']) }}>
    {{ $slot }}
</button>

I hope it can help you...