Comprehensive Guide To Laravel Frontend Blade Snippets

Laravel 11 brings exciting updates to Blade, the PHP templating engine that provides a powerful, expressive way to write frontend code. Blade helps developers create dynamic layouts, reusable components, and seamless user interfaces without the hassle of writing plain PHP. In this guide, we will dive into everything you need to know about Laravel Blade snippets, from basic templating to advanced layout techniques.

What is Laravel Blade?
Echoing Data in Blade
Conditional Statements
Loops: @foreach, @forelse, and more
Template Inheritance: @extends, @section, @yield, @hasSection
Blade Components and Slots
Blade Conditional Classes and Attributes
Security and Environment Directives: @csrf, @method, @env
Dynamic Layouts: @stack, @push, @prepend
Conclusion

1. What is Laravel Blade?

Blade is Laravel’s simple, yet powerful templating engine. It allows you to write PHP code in your HTML files, making it easy to render dynamic content, manage layouts, and break down complex structures into reusable components.

Blade files have a .blade.php extension and are compiled into plain PHP, allowing for high performance.

2. Echoing Data in Blade

To display dynamic data in a Blade template, you use double curly braces {{ }}.


<h1>{{ $name }}</h1>

Blade automatically escapes data to prevent XSS (Cross-Site Scripting) attacks. If you want to display raw HTML, use the {!! !!} syntax:


<p>{!! $description !!}</p>

3. Conditional Statements

Blade offers an easy syntax for conditionals:

@if, @elseif, @else


@if($user->isAdmin())
    <p>Welcome, Admin!</p>
@elseif($user->isManager())
    <p>Welcome, Manager!</p>
@else
    <p>Welcome, User!</p>
@endif

@unless

@unless is the opposite of @if.


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

4. Loops: @foreach, @forelse, and More

Blade supports a variety of loops for displaying data collections.

@foreach


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

@forelse

The @forelse directive is useful for displaying a fallback message when a collection is empty.


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

@for, @while, and @continue

You can also use @for and @while loops as needed:


@for($i = 0; $i < 10; $i++)
    <p>Iteration: {{ $i }}</p>
@endfor

Use @break and @continue to control loop flow.

5. Template Inheritance: @extends, @section, @yield, and @hasSection

Laravel Blade makes it easy to define and inherit templates. You can define a master layout and reuse it across various views.

@extends

The @extends directive allows you to inherit from a base layout. For instance, if you have a layouts/master.blade.php, you can extend it like so:


@extends('layouts.master')

This means the child view will use the master layout's HTML structure.

@section and @yield

To inject content into specific areas of the layout, use @section and @yield.

@section: Defines a content block.
@yield: Displays the content of a section in the master layout.

Example in master.blade.php:


<html>
  <head>
    <title>@yield('title')</title>
  </head>
  <body>
    @yield('header')
    <div class="content">
      @yield('content')
    </div>
    <footer>@yield('footer')</footer>
  </body>
</html>

And in a child view:


@extends('layouts.master')

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

@section('header')
    <h1>Welcome to the Home Page</h1>
@endsection

@section('content')
    <p>This is the content area of the home page.</p>
@endsection

@section('footer')
    <p>Footer information here.</p>
@endsection

@hasSection

The @hasSection directive checks if a section is defined before rendering it, useful for fallback content.


@hasSection('title')
    <title>@yield('title')</title>
@else
    <title>Default Title</title>
@endif

6. Blade Components and Slots

Components allow you to build reusable UI elements, making your code more modular.

Defining a Component

Create a Blade component like components/alert.blade.php:


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

In your view, you can use this component as:


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

The type variable will be passed to the component, and the content within the component tags will be passed to the $slot.

7. Blade Conditional Classes and Attributes

Laravel Blade provides a clean syntax for adding conditional classes and attributes to HTML elements.


<button class="btn {{ $isActive ? 'btn-active' : 'btn-inactive' }}">
    Click Me
</button>

You can even conditionally set attributes:


<input type="text" {{ $isDisabled ? 'disabled' : '' }}>

8. Security and Environment Directives

@csrf

When creating forms in Laravel, you must include a CSRF token for security purposes:


<form method="POST">
    @csrf
    <input type="text" name="name">
    <button type="submit">Submit</button>
</form>

@method

When your form submits via a method other than POST (e.g., PUT or DELETE), you use @method:


@method('PUT')

@env

Use @env to run code only in certain environments, like development or production.


@env('local')
    <p>You're in the local environment.</p>
@endenv

9. Handling Dynamic Layouts: @stack, @push, and @prepend

These directives are vital for managing dynamic content in your Blade views, especially for adding scripts or styles to a master layout from a child view.

@stack

The @stack directive defines a location where content can be "stacked" via @push or @prepend.


@stack('scripts')

This defines a place in your layout where JavaScript (or any other type of content) will be added.

@push

The @push directive allows you to add content to the stack. You might want to use it for additional scripts:


@push('scripts')
    <script src="{{ asset('js/app.js') }}"></script>
@endpush

The content will be rendered in the order it was pushed.

@prepend

The @prepend directive works like @push, but it adds content at the beginning of the stack.


@prepend('scripts')
    <script src="{{ asset('js/jquery.js') }}"></script>
@endprepend

Example of @stack, @push, and @prepend

In master.blade.php:


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

    @stack('scripts')
  </body>
</html>

In a child view:


@extends('layouts.master')

@section('content')
    <p>Welcome to the page!</p>
@endsection

@prepend('scripts')
    <script src="{{ asset('js/jquery.js') }}"></script>
@endprepend

@push('scripts')
    <script src="{{ asset('js/app.js') }}"></script>
@endpush

Rendered output:


<html>
  <body>
    <div class="content">
        <p>Welcome to the page!</p>
    </div>

    <script src="/js/jquery.js"></script>  <!-- Prepended script -->
    <script src="/js/app.js"></script>     <!-- Pushed script -->
  </body>
</html>

Conclusion

Laravel Blade in Laravel 11 offers an extensive range of directives and features for frontend developers. From basic templating and layout inheritance to advanced directives like @stack, @push, and @prepend, Blade helps you manage complex UI structures efficiently. As Laravel evolves, Blade continues to be a cornerstone for building fast, maintainable, and clean web applications.

Table of Contents