Blade Components and Their Useful Features

Blade components in Laravel offer a powerful way to create reusable UI elements, making frontend development more structured and maintainable. In this blog, we’ll explore how Blade components work, their useful features, and practical examples. 1. What Are Blade Components? Blade components allow developers to encapsulate UI logic and reuse them across multiple views. Instead […]

Blade components in Laravel offer a powerful way to create reusable UI elements, making frontend development more structured and maintainable. In this blog, we’ll explore how Blade components work, their useful features, and practical examples.

1. What Are Blade Components?

Blade components allow developers to encapsulate UI logic and reuse them across multiple views. Instead of repeating code, you define a component once and use it anywhere in your Blade templates.

A component consists of:

• A Blade view file (resources/views/components/example.blade.php)
• An optional PHP class (app/View/Components/Example.php)

2. Creating a Blade Component

You can create a component using the Artisan command:

php artisan make:component Alert

This generates:

• resources/views/components/alert.blade.php
• app/View/Components/Alert.php

Example Component (alert.blade.php):

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

Usage in a Blade View:

<x-alert type="warning">This is a warning message!</x-alert>

3. Passing Data to Components

Components accept attributes as parameters.

Example (resources/views/components/button.blade.php):

<button class="btn btn-{{ $type }}">
    {{ $slot }}
</button>

Usage:

<x-button type="primary">Click Me</x-button>

This will render:

<button class="btn btn-primary">Click Me</button>

4. Default Values in Components

You can set default values in your component class (app/View/Components/Button.php):

public function __construct(public string $type = 'secondary') {}

Now, if no type is passed, it defaults to secondary:

<x-button>Default Button</x-button>

5. Component Slots for Dynamic Content

Slots allow Blade components to accept custom content.

Example (card.blade.php):

<div class="card">
    <div class="card-header">
        {{ $title }}
    </div>
    <div class="card-body">
        {{ $slot }}
    </div>
</div>

Usage:

<x-card title="User Details">
    <p>Name: John Doe</p>
</x-card>

6. Merging Attributes with ComponentAttributeBag

Blade allows attribute merging dynamically:

Example (box.blade.php):

<div {{ $attributes->merge(['class' => 'box-default']) }}>
    {{ $slot }}
</div>

Usage:

<x-box class="custom-class">Content Here</x-box>

Final output:

<div class="box-default custom-class">Content Here</div>

7. Inline Components

For simple components, you can define them inline:

php artisan make:component Badge --inline

This creates badge.blade.php inside resources/views/components/, allowing direct HTML usage:

<span class="badge badge-{{ $type }}">{{ $slot }}</span>

8. Anonymous Components

Anonymous components don’t require a class file, making them lighter and faster.

Define resources/views/components/icon.blade.php:

<svg class="icon-{{ $name }}">...</svg>

Usage:

<x-icon name="user" />

Conclusion

Blade components are an essential part of Laravel’s templating system, helping you write cleaner and reusable code. By leveraging attributes, slots, and inline components, you can significantly improve your Laravel Blade workflow.