Blade templates

An introduction to Laravel’s Blade templating engine: directives, layouts, components, and practical examples.

Introduction

Blade is the simple yet powerful templating engine included with Laravel. Unlike some PHP templating engines, Blade does not restrict you from using plain PHP code in your templates. All Blade templates are compiled into plain PHP and cached, so Blade adds virtually zero overhead to your application.

Blade template files use the .blade.php extension and are stored in the resources/views directory.

Route::get('/', function () {
    return view('greeting', ['name' => 'James']);
});

Displaying data

Display data passed to a Blade view by wrapping the variable in double curly braces:

Hello, {{ $name }}.

Blade’s {{ }} syntax automatically passes output through PHP’s htmlspecialchars function to prevent XSS attacks.

You can also display the result of any PHP expression:

Current UNIX timestamp: {{ time() }}

Unescaped output

Use the {!! !!} syntax when you need to render raw HTML without escaping:

Hello, {!! $name !!}.

Always use {{ }} for user-supplied data. Using {!! !!} with untrusted input creates XSS vulnerabilities.

Coexisting with JavaScript frameworks

When your JavaScript framework also uses curly brace syntax, prefix the expression with @ to tell Blade to leave it alone:

<h1>Laravel</h1>

Hello, @{{ name }}.

Blade removes the @ symbol, and {{ name }} is sent as-is to the browser for your JavaScript framework to render.

If you want to compare Blade with Livewire, Inertia, and SPA-style setups, see Frontend.

Blade directives

Conditionals

@if (count($records) === 1)
    There is one record.
@elseif (count($records) > 1)
    There are multiple records.
@else
    There are no records.
@endif

Use @unless to express “if not”:

@unless (Auth::check())
    You are not signed in.
@endunless

Check whether a variable is defined or non-empty with @isset and @empty:

@isset($records)
    {{-- $records is defined and not null --}}
@endisset

@empty($records)
    {{-- $records is "empty" --}}
@endempty

Authentication directives

@auth
    {{-- Content for authenticated users --}}
@endauth

@guest
    {{-- Content for unauthenticated users --}}
@endguest

Switch statements

@switch($i)
    @case(1)
        First case...
        @break

    @case(2)
        Second case...
        @break

    @default
        Default case...
@endswitch

Loops

Blade provides convenient directives for every common loop type:

@for ($i = 0; $i < 10; $i++)
    Current value: {{ $i }}
@endfor

@foreach ($users as $user)
    <p>User: {{ $user->name }}</p>
@endforeach

@forelse ($users as $user)
    <li>{{ $user->name }}</li>
@empty
    <p>No users found.</p>
@endforelse

@while (true)
    <p>Looping forever.</p>
@endwhile

Use @break and @continue to control loop execution:

@foreach ($users as $user)
    @if ($user->type == 1)
        @continue
    @endif

    <li>{{ $user->name }}</li>

    @if ($user->number == 5)
        @break
    @endif
@endforeach

You can also pass a condition directly to the directive:

@foreach ($users as $user)
    @continue($user->type == 1)

    <li>{{ $user->name }}</li>

    @break($user->number == 5)
@endforeach

The loop variable

Inside @foreach loops, the $loop variable gives you useful information about the current iteration:

@foreach ($users as $user)
    @if ($loop->first)
        This is the first iteration.
    @endif

    @if ($loop->last)
        This is the last iteration.
    @endif

    <p>User: {{ $user->name }}</p>
@endforeach

Property	Description
$loop->index	Current loop index (zero-based)
$loop->iteration	Current iteration count (one-based)
$loop->remaining	Remaining iterations
$loop->count	Total number of items
$loop->first	Whether this is the first iteration
$loop->last	Whether this is the last iteration
$loop->even	Whether this is an even iteration
$loop->odd	Whether this is an odd iteration
$loop->depth	Nesting depth of the current loop
$loop->parent	Parent loop variable when nested

Comments

Blade comments are never included in the rendered HTML:

{{-- This comment will not appear in the rendered HTML --}}

Layouts

Component-based layouts

Using Blade components is the recommended approach for building layouts in modern Laravel applications.

First, create a layout component:

<!-- resources/views/components/layout.blade.php -->
<html>
    <head>
        <title>{{ $title ?? 'My App' }}</title>
    </head>
    <body>
        <header>
            <nav>
                <!-- Navigation -->
            </nav>
        </header>

        <main>
            {{ $slot }}
        </main>
    </body>
</html>

Then use the layout in a view:

<!-- resources/views/dashboard.blade.php -->
<x-layout>
    <x-slot:title>Dashboard</x-slot>

    <h1>Dashboard</h1>
    <p>Welcome!</p>
</x-layout>

Template inheritance

The classic approach uses @extends, @section, and @yield:

Defining the parent layout:

<!-- resources/views/layouts/app.blade.php -->
<html>
    <head>
        <title>App Name - @yield('title')</title>
    </head>
    <body>
        @section('sidebar')
            Default sidebar content
        @show

        <div class="container">
            @yield('content')
        </div>
    </body>
</html>

Extending the layout in a child view:

<!-- resources/views/child.blade.php -->
@extends('layouts.app')

@section('title', 'Child Page')

@section('sidebar')
    @parent

    <p>Additional sidebar content</p>
@endsection

@section('content')
    <p>Main content here.</p>
@endsection

@parent lets you append to the parent’s @section content instead of replacing it.

Including sub-views

Use @include to embed another Blade view. All variables available in the parent view are automatically available in the included view:

<div>
    @include('shared.errors')

    <form>
        <!-- Form content -->
    </form>
</div>

Pass additional variables when including a view:

@include('view.name', ['status' => 'complete'])

CSRF protection in forms

HTML forms in the web routes file that send POST, PUT, PATCH, or DELETE requests must include the @csrf directive:

<form method="POST" action="/profile">
    @csrf

    <!-- Form fields -->
</form>

To send PUT, PATCH, or DELETE requests from an HTML form, use the @method directive:

<form method="POST" action="/post/1">
    @csrf
    @method('DELETE')

    <button type="submit">Delete</button>
</form>

See CSRF protection for origin verification, token fallback behavior, and AJAX header strategies (X-CSRF-TOKEN / X-XSRF-TOKEN).

Summary

Displaying data

{{ $variable }} for escaped output, {!! $variable !!} for raw (unescaped) output.

Conditionals

@if, @elseif, @else, @endif, @unless, @isset, @empty, @auth, @guest.

Loops

@for, @foreach, @forelse, @while with $loop variable for iteration metadata.

Layouts

Component-based layouts (<x-layout> with {{ $slot }}) or template inheritance (@extends, @section, @yield).

Sub-views

@include to embed reusable view partials.