With Laravel 5.4 and above, you can add components and slots to your blade views using the @component and @slot directive. If you’re already familiar with using blade, the concept of components and slots is very similar to section and layouts. Using blade components and slots allows you to easily build and implement reusable HTML elements in your view.
Getting Started
We will have a master layout with an alert component that needs to be reusable. Head over to the resources/views directory and create an alert.blade.php file. Edit the file with the following code:
<div class="alert alert-danger">
<div class="alert-title">Error</div>
{{$slot}}
</div>
The {{$slot}} variable contains the content we plan on injecting into our component. Create a master.blade.php file in the resources/views directory and add the following code to it:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width">
<title>Blade Components and Slots</title>
<meta name="description" content="">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<div class="container">
@component('alert')
My components with errors
@endcomponent
</div>
</body>
</html>
Using the @component directive, we inject the alert component we created earlier and append it to the master view.
Making Components Reusable
At the moment our component isn’t really reusable. Take for instance, what if I want to display a success and danger alert using the same component? Or I need my alert to have custom titles?
Let’s fix that. Initially , I need the alert’s class and title to be reusable. So we’ll define a class and title variable in the alert component we created earlier. Edit the alert.blade.php to look like this now:
<div class="alert {{$class}}">
<div class="alert-title">{{$title}}</div>
{{$slot}}
</div>
Now, we have been able to define multiple slots for a class and title variable in our component. We can now reference those slots in our alert component. Edit the master.blade.php with the following code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width">
<title>Blade Components and Slots</title>
<meta name="description" content="">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<div class="container">
@component('alert')
@slot('class')
alert-danger
@endslot
@slot('title')
Error
@endslot
Error Component
@endcomponent
@component('alert')
@slot('class')
alert-success
@endslot
@slot('title')
Success
@endslot
Success Component
@endcomponent
</div>
</body>
</html>
Now we have two alert components – a success and error component. Using @slot(‘class’) and @slot(‘title), we parsed in values to the class and title variables we defined earlier in our components allowing us to achieve reusability.
Routes
We have only a single route. Edit the web/routes.php file with the following code:
<?php
/*
|--------------------------------------------------------------------------
| 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('components', function (){
return view('master');
});
You can start your local server and navigate to the /component route in your browser to see everything in action.
Conclusion: –
In this simple tutorial, we have learnt how to build reusable HTML views using components and slots.
Thanks! I was able to fully understand the use through this article – especially the example here. Much appreciated!