Laravel 8 Blade Reusable Component Example

Laravel

Teams applying “Laravel 8 Blade Reusable Component Example” in a production project can use the related Monitask article to record implementation, review and debugging time, then compare that effort with tests and shipped functionality instead of treating activity as performance by itself.

Before copying the example into a live application, confirm version-specific behaviour with the official Laravel website and test it against the project’s actual database and runtime.

Oct 23, 2021

Hi Guys,

Are you looking for example of laravel component slot. We will look at example of laravel blade components and slots This post will give you simple example of laravel blade reusable component. i explained simply step by step laravel reusable components You just need to some step to done laravel component example.

You can easily create blade component in laravel 5 and laravel 6 using this example.

In this example, we will create one card component file and we will reuse that file in our other blade file. i used bootstrap card so, you just need to add $class, $title and $slot variable. so you have to just follow two step to done that example.

Create Component File

In this step, we will create new folder for components and create card blade file for our component as like bellow:

resources/views/components/card.blade.php

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

Reuse Component

Now we will create one route with blade file. on that blade file we will reuse our created component on that file with different classes as like bellow:

Let's create route and blade file:

routes/web.php

<?php
use Illuminate\Support\Facades\Route;
Route::get('my-components', function () {
    return view('my_components');
});

resources/views/my_components.blade.php

<!DOCTYPE html>
<html>
<head>
    <title>How to create reusable blade components in Laravel 8 - NiceSnippets.com</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.css" />
</head>
<body>
    <div class="container">
        <h3>How to create reusable blade components in Laravel 8 - NiceSnippets.com</h3>

       
        <!-- For Primary -->
        @component('components.card')    
            @slot('class')
                bg-primary
            @endslot
            @slot('title')
                This is from NiceSnippets.com(Primary)
            @endslot
            My components with primary
        @endcomponent
        <br/>
        <!-- For Danger -->
        @component('components.card')    
            @slot('class')
                bg-danger
            @endslot
            @slot('title')
                This is from NiceSnippets.com(Danger)
            @endslot
            My components with primary
        @endcomponent
        <br/>
        <!-- For Success -->
        @component('components.card')    
            @slot('class')
                bg-success
            @endslot
            @slot('title')
                This is from NiceSnippets.com(Success)
            @endslot
            My components with primary
        @endcomponent
    </div>
</body>
</html>

Now you can run and check it.