Laravel 5.4 New Feature - Add new Components & Slots in Blade Template

By Hardik Savani | January 26, 2017 | Category : Laravel

Some days ago release Laravel 5.4 new version with new features and many upgrade. Laravel also provide documentation for Laravel 5.4 on their website. There are several update in Laravel 5.4 like in collections, mail, factory helper, Bootstrappers etc.

In this article we are going to explain laravel 5.4 new feature Components and Slots in blade template engine with example. Components and slots provide us very similar benefits to sections and layouts. however, it is better way to use Components and Components for reusable template layout like for alert.

So in this post, we are going to see how to use Components & Slots with our blade template. So let's see bellow example from scratch.

Create Route

First we require to make route for testing. so open your routes/web.php file and add following route.


Route::get('components', function () {

return view('components');


Create Blade Files

we require two blade files one for layout and another blade file for components. so let's create both files as like bellow:


<!DOCTYPE html>



<title>Laravel 5.4 Components & Slots Example</title>

<link rel="stylesheet" type="text/css" href="">



<div class="container">


<!-- Alert with error -->






Something is wrong


My components with errors


<!-- Alert with success -->








My components with successful response






<div class="alert {{ $class }}">

<div class="alert-title"><strong>{{ $title }}</strong></div>

{{ $slot }}


Now we are ready to run our example so run bellow command ro quick run:

php artisan serve

Now you can open bellow URL on your browser:


I hope it can help you...

Hardik Savani
My name is Hardik Savani. I'm a full-stack developer, entrepreneur and owner of Aatman Infotech. I live in India and I love to write tutorials and tips that can help to other artisan. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.
Follow Me: Github Twitter
***Do you want me hire for your Project Work? Then Contact US.

We are Recommending you: