Skip to content

All topics  /  Laravel

Laravel 10 Blade Reusable Component Example

Laravel ·

Teams applying “Laravel 10 Blade Reusable Component Example” in a production project can use the linked resource 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.

Hi Guys,

Now, let's see the article on laravel 10-blade reusable component example. We will look at examples of how to reusable component laravel 10 blade file. This article goes into detail on how to reuse components in laravel 10 examples. We will use a blade reusable component example.

Are you looking for an example of laravel component slot? We will look at examples of laravel blade components and slots This post will give you a simple example of laravel blade reusable components. I explained simply step-by-step laravel reusable components You just need to do some steps to do laravel component example.

You can easily create blade components in laravel 9 and laravel 10 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 a Bootstrap card so, you just need to add $class, $title, and $slot variable. so you have to just follow two steps to do that example.

Step 1: Download Laravel


Let us begin the tutorial by installing a new laravel application. if you have already created the project, then skip the following step. 

composer create-project laravel/laravel example-app

Step 2: Add Component File

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

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>

resources/views/my_components.blade.php 

<!DOCTYPE html>
<html>
<head>
    <title>How to create reusable blade components in Laravel 10 - 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 10 - 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>

Step 3: Add Route

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

Let's create a route and blade file:

routes/web.php 

<?php
use Illuminate\Support\Facades\Route;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
Route::get('my-components', function () {
    return view('my_components');
});

Run Laravel App:

All steps have been done, now you have to type the given command and hit enter to run the Laravel app: 

php artisan serve

Now, you have to open the web browser, type the given URL and view the app output: 

http://localhost:8000/my-components

More on this topic