30-May-2023
.
Admin
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
I hope it can help you.
#Laravel 10
