Laravel 9 Blade Reusable Component Example

Laravel 9

Nicesnippets

16-04-2022


Laravel 9 Blade Reusable Component Example

Hi Guys,

Now, let's see article of laravel 9 blade reusable component example. We will look at example of how to reusable component laravel 9 blade file. This article goes in detailed on how to reuse component in laravel 9 example. We will use blade reusable component example.

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: Add 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>

resources/views/my_components.blade.php

<!DOCTYPE html>

<html>

<head>

<title>How to create reusable blade components in Laravel 9 - 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 9 - 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 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.