Using Laravel blade components and slots

Laravel Blade components and slots reduce the development time and help us build awesome web applications. The idea of Blade components and slots was inspired by VueJS to build HTML elements into reusable areas.

A component is a reusable group of elements, like you want to create a button and want to reuse it in your application on various places. So we will create a button component and tell Laravel to grab it whenever we want to use it.

Creating a Component

Let's assume we want to make bootstrap alert component, which can be called on various views. Head over to resources/views/ folder and create a components folder in it.

Now we will create a new file in this folder named alert.blade.php, and add the below code in it.

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

As you have noticed that, we are trying to print a $slot variable which is just like a placeholder, whatever value we want to print will be passed on to this variable.

Using a Component

Next, we will look at how we can use the above component we just created. Now head over to the view where you want to show the alert and add the below code to call the alert component.

@component('components.alert')
    This is a dummy message, just for testing purpose.
@endcomponent

Using the @component blade directive, we have injected the alert component we created earlier.

Making a Component Re Useable

As you can see at the moment, our component is not reusable, it mostly looks like the partials we created and use the @include directive to include them into the view.

Let's assume we want to make this component dynamic so we can use the danger, success or warning types in this component. I will make the alert class and title to be reusable. So I will define the $class and $title variable in our component file like below.

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

Now we are using the multiple slots for our component. So head over to the view where you are calling this component and change the code to below.

@component('components.alert')
    @slot('class')
        success
    @endslot
    @slot('title')
        Success Message
    @endslot
    This is a success message, just for testing purpose.
@endcomponent

In above code we are parsing the $class and $title value within our component. Now if you visit your view file in the browser, you will be presented with a success alert. Similarly, we can use the same component to render a different type of message like below.

@component('components.alert')
    @slot('class')
        warning
    @endslot
    @slot('title')
        Warning Message
    @endslot
    This is a warning message, just for testing purpose.
@endcomponent

The above component will render a warning alert in your view and implementation will be the same.

Conclusion

Blade components and slots are a great way to make HTML elements reusable. I just showed you a very basic example but you can even create a fully dynamic and complex element using the Laravel's blade components and slots.