Laravel Blade Components and Slots are coming to 5.4

Laravel Blade Components and Slots are coming to 5.4

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
<!DOCTYPE html>
<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.


Filed in: Laravel 5.4 / Blade


Newsletter

Join the weekly newsletter and never miss out on new tips, tutorials, and more.

Laravel News Partners

Laravel Jobs

Full Stack or Back-End Developer
Alexandria, VA; Tallahassee, FL; Orlando, FL
Marketing for Change
Senior Quality Assurance Engineer
Remote
Bisnow Media
Senior PHP/Laravel Developer: Your Dream Work Environment
Remote
iPhone Photography School
Senior Software Engineer
Remote or San Francisco
Curology
Laravel Developer
Las Vegas, NV
V Shred
R&D Developer
Denver, CO
booj
Full-Stack Developer
Paris, France
Wingly