Laravel Blade Templates Mastery: Complete Guide

Introduction

Blade is Laravel's powerful templating engine. It provides a clean syntax for building views while allowing PHP code when needed. Master these features to build maintainable UI.

Layouts & Inheritance

{{-- resources/views/layouts/app.blade.php --}}
<!DOCTYPE html>
<html>
<head>
    <title>@yield('title')</title>
</head>
<body>
    @include('partials.header')
    
    <main>
        @yield('content')
    </main>
    
    @include('partials.footer')
</body>
</html>

{{-- resources/views/pages/home.blade.php --}}
@extends('layouts.app')

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

@section('content')
    <h1>Welcome to our site!</h1>
@endsection

Blade Directives

{{-- Conditionals --}}
@if ($count > 0)
    <p>Items: {{ $count }}</p>
@elseif ($count > 10)
    <p>Many items</p>
@else
    <p>No items</p>
@endif

@unless($user->isActive)
    <p>User is inactive</p>
@endunless

{{-- Loops --}}
@forelse($items as $item)
    <li>{{ $item->name }}</li>
@empty
    <p>No items found</p>
@endforelse

{{-- Auth --}}
@auth
    <p>Welcome, {{ Auth::user()->name }}</p>
@else
    <a href="/login">Login</a>
@endauth

Components

{{-- resources/views/components/alert.blade.php --}}
<div class="alert alert-{{ $type }}">
    {{ $slot }}
</div>

{{-- Usage --}}
<x-alert type="success">
    Operation completed successfully!
</x-alert>

Slots & Props

{{-- Component with multiple slots --}}
<x-modal>
    <x-slot name="title">Confirm Delete</x-slot>
    
    Are you sure you want to delete this item?
    
    <x-slot name="footer">
        <button>Cancel</button>
        <button>Delete</button>
    </x-slot>
</x-modal>

Summary

Blade provides powerful features for building modern PHP applications. Use components and layouts for reusable, maintainable UI code.

For more Laravel tutorials, see Validation Rules.