Laravel Blade Layout System Explained

Laravel’s Blade templating engine provides a clean, efficient way to build reusable layouts and templates. Understanding Blade layouts is crucial for scaling your Laravel applications.

1️⃣ What is Blade Layout?

Blade layout is a system that allows you to define a master template and extend it across multiple views. This avoids duplication and keeps your templates consistent.

Key benefits:

Reusable layouts
Cleaner templates
Easier maintenance
Dynamic content injection

2️⃣ Creating a Master Layout

Create a new file in resources/views/layouts called app.blade.php.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@yield('title', 'Laravel App')</title>
    <link rel="stylesheet" href="{{ asset('css/app.css') }}">
</head>
<body>
    <header>
        <h1>My Laravel App</h1>
        <nav>
            <a href="{{ route('home') }}">Home</a>
            <a href="{{ route('about') }}">About</a>
        </nav>
    </header>

    <main>
        @yield('content')
    </main>

    <footer>
        <p>&copy; {{ date('Y') }} My Laravel App</p>
    </footer>

    <script src="{{ asset('js/app.js') }}"></script>
</body>
</html>

Explanation:

@yield('title') → Placeholder for page title.
@yield('content') → Placeholder for the main content of each page.
Common assets like CSS/JS are loaded once in the layout.

3️⃣ Extending the Layout in Views

Now, create a view that extends the master layout:

resources/views/home.blade.php


@extends('layouts.app')

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

@section('content')
    <h2>Welcome to the Home Page</h2>
    <p>This is a simple Blade layout example.</p>
@endsection

Explanation:

@extends('layouts.app') → Inherits the master layout.
@section('title') → Sets the page title.
@section('content') → Fills the @yield('content') in the layout.

4️⃣ Adding More Pages

For example, create an About page:

resources/views/about.blade.php


@extends('layouts.app')

@section('title', 'About Us')

@section('content')
    <h2>About Our Company</h2>
    <p>We build modern Laravel applications using Blade layouts.</p>
@endsection

✅ All pages share the same header, footer, and assets.

5️⃣ Using Blade Components for Layout Sections

Blade components allow for reusable pieces inside layouts, like alerts, cards, or navbars.

Create a component: php artisan make:component Alert
Blade file: resources/views/components/alert.blade.php


<div class="alert alert-{{ $type ?? 'info' }}">
    {{ $slot }}
</div>

Use it in a view:


<x-alert type="success">
    Your account has been created successfully!
</x-alert>

6️⃣ Nested Layouts

You can nest layouts for more complex structures:

layouts/app.blade.php → Main layout
layouts/admin.blade.php → Extends app.blade.php with admin sidebar


@extends('layouts.app')

@section('content')
    <div class="admin-sidebar">
        @yield('sidebar')
    </div>
    <div class="admin-content">
        @yield('admin-content')
    </div>
@endsection

Then, in a view:


@extends('layouts.admin')

@section('sidebar')
    <ul>
        <li>Dashboard</li>
        <li>Users</li>
    </ul>
@endsection

@section('admin-content')
    <h2>Admin Dashboard</h2>
@endsection

7️⃣ Blade Layout Best Practices

Keep common layout elements (header, footer, scripts) in the master layout.
Use @section and @yield for dynamic sections.
Use components for reusable UI pieces.
Nest layouts for complex structures like admin dashboards.

8️⃣ Final Summary

The Blade Layout System allows you to:

Build reusable templates.
Keep your views clean and DRY.
Easily scale applications with multiple pages and nested layouts.
Combine with components for modular UI sections.

Mastering Blade layouts is essential for professional Laravel development.

Souy Soeng