Laravel Blade Components and Slots are coming to 5.4

Published on November 15th, 2016 by Eric L. Barnes

A new feature coming to Laravel 5.4 is the ability for you to add Components and Slots to Blade templates. This feature was inspired by Vue.js and allows you to simplify building HTML elements into reusable areas.

In most applications you have a master layout and then sub views that extend it:

// layouts/app.blade.php
 
<html lang="en">
    <head>
    ...
    </head>
    <body>
    @yield('content')
 
---
 
// home.blade.php
@extends('layouts.app')
@section('content')
    <h1>Home Page</h1>
@endsection

As an example let’s pretend you want to add an alert to the homage page. Using the new Laravel Blade Components you can create an inc/alert.blade.php file and add a special $slot variable:

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

Then in your home.blade.php file:

@extends('welcome')
 
@section('content')
<div>
    <h1>Home Page</h1>
    @component('inc.alert')
        This is the alert message here.
    @endcomponent
</div>
@endsection

This allows you to easily define the text or HTML that will appear within the components $slot variable.

Reimagining Views with Slots and Components

Besides taking a simple example of creating an alert you can now do things like have a basic layout with a $slot variable and use the child views to totally drive the design. Here is an example:

// layouts/app.blade.php
<html>
    <head>
        <title>{{ $title or 'Laravel News' }}</title>
    </head>
 
    <body>
        <div class="container">
            {{ $slot }}
        </div>
    </body>
</html>

Then if you call home.blade.php you can do something like:

@component('layouts.app')
    @slot('title')
        Home Page
    @endslot
 
    <div class="col-6">
        @component('inc.alert')
            This is the alert message here.
        @endcomponent
        <h1>Welcome</h1>
    </div>
    <div class="col-6">
        @component('inc.sidebar')
            This is my sidebar text.
        @endcomponent
    </div>
@endcomponent

With this the @slot('title') parses into a “title” variable and everything inside a @component directive turns into a $slot variable used within it’s called view.

You can view all of the announced Laravel 5.4 features and join the weekly Laravel Newsletter to be notified as soon as it’s released.