Laravel 9 - Blade Reusable Component Tutorial

Apr 16, 2022 . Admin

Hi Guys,

This article is focused on blade reusable component example in laravel 9. if you have question about how to reusable component laravel 9 blade file then I will give simple example with solution. We will look at example of how to reuse component in laravel 9 example. This article will give you simple example of blade reusable component example. Let's get started with blade reusable component in laravel.

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 9 and laravel 9 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.

Step 1: Download Laravel

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

composer create-project laravel/laravel example-app
Step 2: Create Blade 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>
resources/views/my_components.blade.php
<!DOCTYPE html>
<html>
<head>
    <title>How to create reusable blade components in Laravel 9 - MyWebtuts.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 9 - MyWebtuts.com</h3>
       
        <!-- For Primary -->
        @component('components.card')    

            @slot('class')
                bg-primary
            @endslot

            @slot('title')
                This is from MyWebtuts.com(Primary)
            @endslot

            My components with primary
        @endcomponent
        <br/>

        <!-- For Danger -->
        @component('components.card')    

            @slot('class')
                bg-danger
            @endslot

            @slot('title')
                This is from MyWebtuts.com(Danger)
            @endslot

            My components with primary
        @endcomponent
        <br/>

        <!-- For Success -->
        @component('components.card')    

            @slot('class')
                bg-success
            @endslot

            @slot('title')
                This is from MyWebtuts.com(Success)
            @endslot

            My components with primary
        @endcomponent
    </div>
</body>
</html>
Step 3: Create Route

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;

/*
|--------------------------------------------------------------------------
| 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 web browser, type the given URL and view the app output:

http://localhost:8000/my-components

I hope it can help you.

#Laravel 9