How to Use Laravel Blade Components for Reusable UI Elements?

Dynamic web applications often involve cluttering the PHP code with cumbersome echo statements and inline HTML. This approach is difficult to maintain, scale, and secure. That’s why developers use Laravel Blade.

Laravel Blade provides a powerful, standalone templating engine that simplifies this process. Unlike plain PHP, Blade offers intuitive syntax for common tasks without restricting the use of plain PHP code.

This guide details how to use Laravel Blade to create clean, organized, and inheritance-driven templates. So you can build more maintainable and scalable applications. Let’s get straight into it.

What is Laravel Blade?

Laravel Blade is a powerful built-in templating engine. It simplifies the process of creating dynamic views in Laravel applications. Unlike traditional templating engines, Blade offers a unique blend of flexibility and ease of use. 

It integrates with Laravel’s core functionalities, allowing you to embed PHP logic within their Blade templates using syntax. This prevents the need for complex template languages and streamlines the development process.

Key Features of Laravel Blade

• Lightweight and Fast: Blade templates are compiled into plain PHP code and cached until they are modified. This ensures better performance, as there’s no runtime overhead during the rendering process.
• Extensible: Blade allows developers to create custom directives, enabling you to define your syntax for repetitive tasks. This feature makes the engine versatile and adaptable to various use cases.
• Reusable Components: One of Blade’s standout features is its support for reusable components and layouts. It makes managing large-scale applications a breeze by promoting a structured and modular approach to templating.
• Data Binding: With its concise syntax, Blade makes data binding straightforward, letting you dynamically display data in your templates with ease. Whether it’s outputting variables or handling complex logic, Blade simplifies the process.

Laravel Blade combines simplicity with functionality, empowering developers to craft visually appealing and dynamic applications efficiently.

Prerequisites to Use Laravel Blade Components

Before building modular and reactive UI elements with Laravel Blade, you need a solid foundation.

PHP & Laravel Version Requirements

Blade is integral to Laravel, so your PHP version must be compatible with your chosen Laravel release.

• For Current Laravel Releases (e.g., Laravel 11.x): You will need PHP 8.2 or higher.
• For the Latest (e.g., Laravel 12.x when released): Always check the official Laravel Documentation for the most up-to-date requirements, but expect a requirement of PHP 8.3+.

Blade Components themselves are fully supported in Laravel 7 and above. But using the latest stable versions is always recommended for security, performance, and feature access.

Set Up a New Laravel Project

The first step is to create a fresh Laravel project using Composer, the dependency manager for PHP.

Step 1: Open your terminal or command prompt.

Step 2: Run the following command:

composer create-project laravel/laravel blade-demo

This command does the following:

• composer create-project: Instructs Composer to create a new project from a package.
• laravel/laravel: Uses the official Laravel “skeleton” application as the template.
• blade-demo: The name of your new project directory. You can change this to whatever you prefer.

Step 3: Navigate into your new project directory:

cd blade-demo

Step 4: Serve the application:

You can use Laravel’s built-in development server to see your application in action.

php artisan serve

This will start a local development server, typically at http://127.0.0.1:8000. Visiting this URL in your browser will display the default Laravel welcome page, which is itself rendered using Blade.

How to Use Laravel Blade? (Using Components Tag)

When trying to create UI, repetitive HTML structures like cards, modals, or alerts create maintenance overhead. Anonymous components are ideal for simple, reusable bits of UI that don’t require complex PHP logic. They consist of a template file without an associated PHP class.

Step 1: Create the Component Template

Navigate to the resources/views/components directory. Create a new Blade file. The filename will become your HTML tag name. For an alert box, create a file named alert.blade.php.

Step 2: Define the Component’s Structure & Slots

Inside alert.blade.php, use HTML and Blade syntax. Variables passed to the component are available via $attributes. Use {{ $slot }} to define where the inner content of your component tag will be injected.

<!-- resources/views/components/alert.blade.php -->
<div {{ $attributes->merge(['class' => 'p-4 border-l-4 bg-blue-50 border-blue-400']) }}>
    <p class="text-sm text-blue-700">
        {{ $slot }}
    </p>
</div>

Step 3: Render the Component in a View

In any other Blade file (e.g., welcome.blade.php), use your component as an HTML tag. Pass attributes as you would in HTML. Any content placed between the opening and closing tags will populate the $slot variable.

<!-- resources/views/welcome.blade.php -->
<x-alert class="mb-4">
    This is a primary alert message! Check it out.
</x-alert>

Output

This will render a styled alert div with your message inside. The class=”mb-4″ will be merged with the default classes from the component template.

How to Use Laravel Blade? (Using Component Class)

Class-based components are used when your component requires explicit data handling, methods, or more complex logic. They provide a clear separation of PHP logic and the Blade templating engine.

Step 1: Generate the Component Class and View

Use the Artisan command to create both the class and the corresponding view template.

php artisan make:component ProductCard

This creates two files:

• app/View/Components/ProductCard.php (The Class)
• resources/views/components/product-card.blade.php (The View)

Step 2: Define the Component’s Data in the Class

The class’s __construct method is where you define the data the component will receive. All public properties on the class are automatically available to the view.

// app/View/Components/ProductCard.php
namespace App\View\Components;
use Illuminate\View\Component;
class ProductCard extends Component
{
    public $product;
    public $isFeatured;
    public function __construct($product, $isFeatured = false)
    {
        $this->product = $product;
        $this->isFeatured = $isFeatured;
    }
    public function render()
    {
        return view('components.product-card');
    }
}

Step 3: Build the Component’s Template

In the associated Blade file, you have direct access to all the component’s public properties ($product, $isFeatured).

<!-- resources/views/components/product-card.blade.php -->
<div class="p-4 border rounded-lg {{ $isFeatured ? 'bg-yellow-100 border-yellow-300' : 'bg-white' }}">
    <h3 class="font-bold text-lg">{{ $product->name }}</h3>
    <p class="text-gray-600">{{ $product->price }}</p>
    {{ $slot }} <!-- Can still render slot content if needed -->
</div>

Step 4: Render the Component in a View:

Use the component tag. Pass parameters as arguments, which will be received by the class’s constructor.

<!-- In a view file, like 'catalog.blade.php' -->
<x-product-card :product="$product" is-featured />

ExplanationThe :product directive passes the $product variable as a PHP object, and is-featured is a boolean attribute that passes true. The component class processes this data and makes it available to the template for rendering.

Laravel Blade Directives

Blade directives in Laravel provide a clean and intuitive way to write control structures, making your templates concise and easy to read. Here’s a stepwise guide to using some commonly used Blade directives:

Step 1: Using Control Structures in Blade

Control structures in Blade are similar to PHP control structures but come with a simplified and elegant syntax. Use the @if directive to conditionally display content based on specific conditions. For example:

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

• The @if directive checks the condition.
• The @else directive handles the fallback content when the condition is not met.

You can also chain multiple conditions using @elseif.

@if($user->role === 'admin')
    <p>Welcome, Admin!</p>
@elseif($user->role === 'editor')
    <p>Welcome, Editor!</p>
@else
    <p>Welcome, User!</p>
@endif

Step 2: Iterating Over Data with Loops

Blade provides directives like @foreach, @for, and @while for iterating over data. Use @foreach to loop through an array or collection:

@foreach($items as $item)
    <li>{{ $item }}</li>
@endforeach

If your collection might be empty, you can handle that case using @forelse:

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

Step 3: Using Switch Statements

The @switch directive lets you handle multiple conditions in an elegant way:

@switch($status)
    @case('active')
        <p>Status: Active</p>
        @break
    @case('inactive')
        <p>Status: Inactive</p>
        @break
    @default
        <p>Status: Unknown</p>
@endswitch

In the above code:

• The @case directive handles specific cases.
• The @default directive is used when none of the cases match.

Step 4: Combining Blade Directives

Blade’s directives can be nested or combined for complex conditions and loops. For example:

@foreach($users as $user)
    @if($user->isActive())
        <p>{{ $user->name }} is active.</p>
    @else
        <p>{{ $user->name }} is inactive.</p>
    @endif
@endforeach

Blade directives simplify PHP control structures for better readability. By mastering Blade directives, you can streamline your templating process and write cleaner, more maintainable code. If you want to build a website with such efficient tools that enhance user experience, get in touch with our Laravel development company.

Blade Layouts and Components

Laravel Blade simplifies the creation of consistent layouts and reusable components in your application. This guide will walk you through using Blade layouts, sections, components, and slots effectively.

Blade Layouts and Sections

Blade layouts allow you to define a master template for your application, providing a consistent structure across multiple views. Sections are placeholders in the layout that child views can override or populate with content.

Step 1: Defining a Layout

A layout serves as the skeleton for your application views, containing common HTML and Blade directives like @yield and @include. Here’s an example layout file:

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

Explanation:

• @yield(‘title’): Placeholder for the page title.
• @include(‘partials.header’) and @include(‘partials.footer’): Include reusable header and footer partials.
• @yield(‘content’): Placeholder for the main content of the page.

Step 2: Using a Layout in a Child View

Child views extend the layout using the @extends directive and populate sections with the @section directive. Here is the example code:

<!-- resources/views/home.blade.php -->
@extends('layouts.app')
@section('title', 'Home Page')
@section('content')
    <h1>Welcome Home!</h1>
    <p>This is the home page.</p>
@endsection

Explanation:

• @extends(‘layouts.app’): Indicates that this view extends the app layout.
• @section(‘title’, ‘Home Page’): Sets the page title for the layout.
• @section(‘content’): Defines content for the content section in the layout.

Using layouts ensures consistency across pages while making it easier to maintain and update your application structure.

Blade Components and Slots

Laravel Blade components are reusable chunks of UI that help simplify and modularize your templates. Slots allow you to pass dynamic content into these components.

Step 1: Defining a Component

To create a component, create a .blade.php file inside the resources/views/components directory. Example:

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

Explanation:

• {{ $type }}: Dynamically sets the alert type (e.g., success, error).
• {{ $slot }}: Placeholder for the content passed to the component.

Step 2: Using a Component in a View

Use the component with the <x- syntax in your views and pass data to it via attributes. Example:

<x-alert type="success">
    Operation completed successfully.
</x-alert>

Explanation:

• <x-alert>: References the alert component.
• type=”success”: Sets the alert type.

By mastering layouts and components in Blade, you can build scalable and maintainable Laravel applications with ease.

Benefits of Using Blade Components

Blade components can help turn your development workflow from writing repetitive HTML snippets to a library of robust, self-contained UI elements. This approach yields significant, tangible benefits across your entire project.

Reusability

Laravel blade syntax is reasonably readable. Components allow you to encapsulate UI elements into self-contained building blocks. A component like <x-modal> or <x-data-table> can be defined once and then instantiated anywhere in your application with different data. It eliminates repetitive code and ensures visual consistency.

Maintainability

By isolating logic and markup into specific components, you adhere to the single-responsibility principle. To modify a feature—like the styling of all buttons—you update a single component file (button.blade.php).

This change automatically propagates everywhere the component is used, dramatically simplifying code maintenance.

Easier testing and updates

Components create a clear contract for your UI. You can test a component in isolation, verifying it renders correctly with various data inputs. When requirements change, updates are confined to a single location. It reduces the risk of introducing bugs in unrelated parts of the application.

Cleaner templates

Components abstract complex HTML structures into simple, semantic tags. Compare a cluttered template full of HTML to one that uses intuitive components:

Without Components

<div class="p-4 bg-blue-50 border-l-4 border-blue-400 mb-4">
    <p class="text-blue-700">Your alert message here.</p>
</div>

With Components

<x-alert type="info" message="Your alert message here."/>

Advanced Laravel Blade Features

Blade templating in Laravel goes beyond the basics, offering advanced features that enhance flexibility and productivity. This section covers some of these advanced capabilities, including loop indices, conditional classes, and custom directives, making your Blade templates more dynamic and efficient.

Loops with Indices

Blade provides the $loop variable within loops, allowing you to access metadata such as the index, iteration count, and loop state.

@foreach($items as $item)
    <p>{{ $loop->index }}: {{ $item }}</p>
@endforeach

Explanation:

• $loop->index: Zero-based index of the current iteration.
• $loop->iteration: One-based index.
• $loop->remaining: Remaining iterations.
• $loop->first and $loop->last: Indicate if the current iteration is the first or last.

The $loop variable simplifies accessing loop-specific information, which is especially useful in generating numbered lists or handling conditional logic inside loops.

Blade Conditional Classes

Laravel 8+ introduces the @class directive, enabling you to conditionally apply CSS classes based on dynamic conditions.

<div @class([
    'alert',
    'alert-success' => $isSuccess,
    'alert-danger' => !$isSuccess,
])>
    This is an alert.
</div>

Explanation:

• @class accepts an array where keys are CSS class names, and values are conditions.
• If $isSuccess is true, the alert-success class is applied.
• If $isSuccess is false, the alert-danger class is applied.

This directive simplifies applying classes dynamically, making your templates cleaner and reducing the need for additional logic in your controllers or JavaScript.

Custom Blade Directives

You can extend Blade’s functionality by defining your custom directives. This is helpful for repetitive tasks like formatting dates.

Blade::directive('datetime', function ($expression) {
    return "<?php echo ($expression)->format('m/d/Y H:i'); ?>";
});

Using the Custom Directive:

@datetime($date)

Explanation:

• Blade::directive(): Registers a new directive with a name and a callback function.
• @datetime: This directive formats a DateTime object into a specific format.

Custom directives allow you to simplify complex logic, making your templates more expressive and easier to maintain.

Advanced Blade features like $loop variables, the @class directive, and custom Blade directives empower developers to write efficient and readable templates. By leveraging these tools, you can streamline your development workflow and enhance the dynamic nature of your Laravel applications. You can even style them elegantly when you make beautiful Laravel pages using Tailwind CSS.

Conclusion

Laravel Blade offers a streamlined way to create dynamic, maintainable, and clean views in your web applications. By understanding the basics, like setting up Blade templates and using key directives, you can easily manage control structures and display data.

The ability to work with layouts and components helps keep your code organized and reusable. Plus, advanced features like custom directives and conditional classes give you more flexibility and control over your templates.

If you are looking to build a well-designed website with enhanced performance, hire Laravel developers.

FAQs on Using Laravel Blade Components

Mayur Upadhyay

Leading digital transformation projects with precision and creativity, Mayur turns complex ideas into results-driven web solutions. As Project Leader at WPWeb Infotech, he leverages his expertise in Laravel, PHP, Shopify, and Drupal to deliver innovation, scalability, and long-term success.