Mastering Laravel Validation: A Comprehensive Guide to 'exists' Rule
In this tutorial, I would you to show, how to create reusable components in laravel using components and slots.
Laravel provides blade components for creating components and slots. You can easily create components in laravel 5, laravel 6, laravel 7, laravel 8, and laravel 9. Let's start with an example
First, create blade components like as below
resources/views/components/card.blade.php
<div class="widget {{ $class }}">
<h5 class="widget-header">{{ $title }}</h5>
<div class="widget-body">
<p class="widget-text">{{ $slot }}</p>
</div>
</div>
Now we need to create a route and blade file for using this component. Follow us below
routes/web.php
Route::get('widget-components', function () {
return view('widget-component');
});
//or
Route::view('widget-components', 'widget-component');
resources/views/widget-component
<!DOCTYPE html>
<html>
<head>
<title>Topics - Kodersolution.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>Topics</h3>
<!-- For Primary -->
@component('components.card')
@slot('class')
bg-primary
@endslot
@slot('title')
This is from Kodersolution.com(Primary)
@endslot
My custom widget component with primary background
@endcomponent
<br/>
<!-- For Success -->
@component('components.card')
@slot('class')
bg-success
@endslot
@slot('title')
This is from Kodersolution.com(Success)
@endslot
My custom widget component with success background
@endcomponent
<br/>
<!-- For Info -->
@component('components.card')
@slot('class')
bg-primary
@endslot
@slot('title')
This is from Kodersolution.com(Info)
@endslot
My custom widget component with info background
@endcomponent
</div>
</body>
</html>
I hope, it will help you to create reusable components.
Subscribe to the Email Newsletter