Posted inLaravel

Everything You Need to Know About Blade Templating in Laravel

In Laravel, Blade is the simple, yet powerful templating engine that allows developers to separate the logic from the views in a clean and maintainable way. Blade enables efficient templating and includes built-in features that make it easy to integrate dynamic content into your applications. This article dives deep into everything you need to know about Blade in Laravel, from basic syntax to advanced features.

What is Blade in Laravel?

Blade is Laravel’s default templating engine that comes out-of-the-box with every Laravel application. Unlike regular PHP templates, Blade is a lightweight templating engine that doesn’t add extra overhead and is highly optimized for speed. Blade templates are typically stored with the .blade.php file extension and allow you to use a mixture of PHP code and HTML, making the process of generating dynamic views seamless.

Basic Blade Syntax

Variables

In Blade, you can output data by using curly braces {{ }}. This is used for printing data in your views, which are typically passed from a controller.

{{ $name }}

The Blade engine automatically escapes HTML entities to prevent cross-site scripting (XSS) attacks. If you want to display raw HTML, you can use {!! !!}:

{!! $htmlContent !!}





Comments





You can add comments to your Blade templates. Blade comments are not displayed in the rendered HTML:





{{-- This is a Blade comment --}}










Control Structures





If Statements





Blade makes it easy to work with control structures such as if statements.





@if ($user)
    <p>Welcome, {{ $user->name }}!</p>
@else
    <p>Guest User</p>
@endif










Loops





You can use loops like foreach, for, and while in Blade templates:





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










Other Control Structures





Blade also supports unless, isset, empty, and more, allowing developers to easily implement conditional logic.





@unless ($user->isAdmin())
    <p>This user is not an admin.</p>
@endunless










Blade Directives





Blade includes a set of custom directives that simplify many common tasks. These include directives for authentication, pagination, and loops.





@auth





Check if a user is authenticated:





@auth
    <p>Welcome, {{ Auth::user()->name }}</p>
@endauth










@guest





Check if the user is a guest (not authenticated):





@guest
    <p>You are a guest.</p>
@endguest










@csrf





Blade automatically includes a CSRF token in forms for security:





<form method="POST" action="/submit">
    @csrf
    <button type="submit">Submit</button>
</form>










@method





For non-GET requests like PUT and DELETE, you can use the @method directive to simulate different HTTP verbs.





<form method="POST" action="/update">
    @method('PUT')
    @csrf
    <button type="submit">Update</button>
</form>










Layout and Views





Blade also allows you to create reusable layouts, which are especially useful when you have common elements like a header, footer, or navigation bar across multiple views. You can define a layout and then extend it in your view files.





Creating Layouts





To create a layout, you typically define a file in the resources/views/layouts directory, such as app.blade.php.





<!DOCTYPE html>
<html>
<head>
    <title>@yield('title')</title>
</head>
<body>
    <header>
        <h1>My Website</h1>
    </header>

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

    <footer>
        <p>© 2025 My Company</p>
    </footer>
</body>
</html>










Extending Layouts





You can extend the layout in any view file by using @extends and filling the sections with @section.





@extends('layouts.app')

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

@section('content')
    <h2>Welcome to My Home Page</h2>
    <p>Content goes here.</p>
@endsection










Blade Components and Slots





Blade components allow you to create reusable pieces of UI. These components are great for encapsulating HTML that you want to reuse, such as buttons, cards, or modals.





Creating Components





You can create a component with the php artisan make:component command. This generates a class and a view file.





php artisan make:component Alert





This creates an Alert.php class in app/View/Components/ and a Blade view in resources/views/components/alert.blade.php.





You can use this component in any Blade view:





<x-alert type="danger" message="Something went wrong!" />











Slots





You can pass dynamic content to Blade components using slots:





<x-alert>
    <strong>Warning:</strong> This is a custom alert message.
</x-alert>











Blade and JavaScript





Blade works smoothly with JavaScript, allowing you to mix server-side and client-side logic. You can use Blade to pass data to JavaScript variables or include JavaScript libraries in your views.





Passing Data to JavaScript





You can pass data from Blade to JavaScript using the @json directive:





<script>
    var user = @json($user);
</script>






Blade is an essential part of Laravel that enables developers to create dynamic, maintainable, and reusable views with minimal effort. By separating logic from the view, Blade ensures a clean and organized application structure, making it an indispensable tool for any Laravel developer. With its simple syntax, powerful directives, and flexibility in integrating with JavaScript, Blade is a crucial asset for building modern web applications.