Laravel Blade Templates

Laravel Blade is the template engine that turns your data into HTML. Blade files end in .blade.php, live in resources/views, and offer clean syntax for printing variables, conditions, loops and reusable layouts while still allowing plain PHP.

Displaying Data

Double curly braces print a value and automatically escape HTML, protecting you from XSS. Use {!! !!} only for HTML you fully trust.

{{-- resources/views/greeting.blade.php --}}
<h1>Hello, {{ $name }}</h1>
<p>You have {{ count($messages) }} new messages.</p>
<p>{{ $bio ?? 'No bio yet' }}</p>

// Controller: return view('greeting', ['name' => '<b>Ali</b>', 'messages' => [1, 2]]);
<h1>Hello, &lt;b&gt;Ali&lt;/b&gt;</h1>
<p>You have 2 new messages.</p>
<p>No bio yet</p>

Blade Conditions and Loops

Blade directives start with @. @forelse handles empty lists, and the $loop variable tells you about the current iteration.

@if ($user->isAdmin())
    <a href="/admin">Admin panel</a>
@elseif ($user->verified)
    <span>Verified member</span>
@else
    <span>Please verify your email</span>
@endif

<ul>
@forelse ($posts as $post)
    <li>{{ $loop->iteration }}. {{ $post->title }}</li>
@empty
    <li>No posts yet.</li>
@endforelse
</ul>
<span>Verified member</span>
<ul>
    <li>1. Getting started with Laravel</li>
    <li>2. Blade tips</li>
</ul>

Laravel Blade Components and Layouts

Components are reusable pieces of UI. An anonymous component is just a file in resources/views/components. A layout component uses $slot for the page content and named slots for extras.

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

{{-- resources/views/home.blade.php --}}
<x-layout title="Home">
    <h1>Welcome home</h1>
</x-layout>
<title>Home</title>
...
<main><h1>Welcome home</h1></main>

Components With Props

{{-- resources/views/components/alert.blade.php --}}
@props(['type' => 'info'])
<div {{ $attributes->merge(['class' => "alert alert-$type"]) }}>
    {{ $slot }}
</div>

{{-- usage --}}
<x-alert type="success" class="mb-4">Profile saved!</x-alert>
<div class="alert alert-success mb-4">
    Profile saved!
</div>

Other Handy Directives

  • @include("partials.footer") inserts another view
  • @csrf adds the hidden CSRF token field to forms
  • @method("PUT") spoofs PUT/PATCH/DELETE in HTML forms
  • @auth / @guest show content based on login state
  • @error("email") shows a validation message for a field
  • @vite(["resources/css/app.css", "resources/js/app.js"]) loads compiled assets

Frequently asked questions

What is the difference between {{ }} and {!! !!} in Blade?

{{ }} escapes HTML special characters, which is safe for user data. {!! !!} prints raw HTML and should only be used with trusted content.

Should I use @extends or components for layouts?

Both work. Laravel 11 starter kits use components with slots, which are more flexible; @extends and @section are still supported.

Can I write plain PHP in Blade?

Yes, with @php ... @endphp, but keep logic in controllers or components so templates stay clean.