Laravel Blade Template Engine: Inheritance, Components, Slots, Data Display, Flow Control and Extending Blade
This article provides a comprehensive guide to Laravel's Blade templating engine, covering file structure, layout inheritance, sections, components and slots, data rendering, integration with JavaScript frameworks, conditional statements, loops, view inclusion, collection rendering, and how to create custom Blade directives.
Introduction
Blade is Laravel's simple yet powerful templating engine. Unlike other PHP template engines, Blade does not restrict the use of native PHP code. Blade view files have the .blade.php extension and are stored in the resources/views directory. They are compiled to native PHP and cached, so they add virtually no overhead.
Template Inheritance
Defining a Layout
Most web applications share a common layout. A master layout can be created in resources/views/layouts/app.blade.php and may contain a @section for the sidebar and a @yield('content') placeholder for page‑specific content.
<!-- file saved at resources/views/layouts/app.blade.php -->
<html>
<head>
<title>Application Name - @yield('title')</title>
</head>
<body>
@section('sidebar')
This is the master sidebar.
@show
<div class="container">
@yield('content')
</div>
</body>
</html>Extending the Layout
Child views use the @extends('layouts.app') directive and define their own sections. The @parent directive can be used to append content to a parent section instead of overwriting it.
<!-- file saved at resources/views/layouts/child.blade.php -->
@extends('layouts.app')
@section('title', 'Page Title')
@section('sidebar')
@parent
<p>This will be appended to the master sidebar.</p>
@endsection
@section('content')
<p>This is the main content.</p>
@endsectionComponents & Slots
Components work like sections but are easier to understand. A reusable alert component can be defined in resources/views/alert.blade.php and used with @component or the newer component alias syntax.
<div class="alert alert-danger">
{{ $slot }}
</div>Named slots allow injecting a title:
<div class="alert alert-danger">
<div class="alert-title">{{ $title }}</div>
{{ $slot }}
</div>Data can be passed to a component via a second argument array.
@component('alert', ['foo' => 'bar'])
...
@endcomponentComponent aliases are registered in AppServiceProvider::boot() using Blade::component('components.alert', 'alert'), after which the component can be rendered with @alert([...]) or simply @alert.
Displaying Data
Variables passed to a view are displayed with double curly braces, e.g., {{ $name }}. The braces automatically escape HTML via htmlspecialchars. Unescaped output uses {!! $name !!}. JSON can be embedded using @json($array) inside a <script> tag.
Blade & JavaScript Frameworks
When JavaScript frameworks also use {{ }} for interpolation, prefix the expression with @ in Blade to keep it untouched, e.g., Hello, @{{ name }}.. The @verbatim directive can wrap large blocks of raw JavaScript/HTML.
Flow Control
If Statements
Blade provides @if, @elseif, @else, and @endif directives that map directly to PHP's if statements. @unless is the inverse of @if. Additional directives include @isset, @empty, @auth, @guest, and @hasSection.
Switch Statements
Use @switch, @case, @break, @default, and @endswitch to build switch logic.
Loops
Blade supports @for, @foreach, @forelse, @while, and loop control directives such as @continue and @break. The special $loop variable provides information like $loop->first, $loop->last, $loop->index, and $loop->parent for nested loops.
Comments
Blade comments are written as {{-- This comment will not appear in the rendered HTML --}} and are stripped from the final output.
Including Sub‑Views
The @include directive inserts another view and shares all parent variables. Additional directives @includeIf, @includeWhen, and @includeFirst provide conditional inclusion and fallback options.
Rendering Views for Collections
The @each directive renders a view for each item in a collection in a single line: @each('view.name', $jobs, 'job'). An optional fourth argument supplies a view to render when the collection is empty.
Extending Blade
Custom directives can be defined in a service provider using
Blade::directive('datetime', function ($expression) { return "<?php echo ($expression)->format('m/d/Y H:i'); ?>"; });. After adding or changing directives, clear the view cache with php artisan view:clear.
Signed-in readers can open the original source through BestHub's protected redirect.
This article has been distilled and summarized from source material, then republished for learning and reference. If you believe it infringes your rights, please contactand we will review it promptly.
Laravel Tech Community
Specializing in Laravel development, we continuously publish fresh content and grow alongside the elegant, stable Laravel framework.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.