Building Reusable Livewire Components in Livewire 3.0

January 3, 2025
9:42 pm
No Comments

Step 1: What are Reusable Components?

Reusable components are modular, self-contained Livewire components that can be used across multiple parts of your application. They follow the DRY (Don’t Repeat Yourself) principle, making your codebase more maintainable and scalable.

Step 2: Creating a Reusable Alert Component

Let’s start by building a reusable Alert Component that displays success, warning, or error messages.

1. Generate the Component

Run the following command to create the component:


php artisan make:livewire Alert

This will generate:

app/Livewire/Alert.php – The PHP class for the component.
resources/views/livewire/alert.blade.php – The Blade view for the component.

2. Define the Component Logic

Open Alert.php and update the logic to accept dynamic properties:


<?php

namespace App\Livewire;

use Livewire\Component;

class Alert extends Component
{
    public $type;
    public $message;

    public function render()
    {
        return view('livewire.alert');
    }
}

3. Create the Blade View

In alert.blade.php, design the alert message UI with dynamic classes:


<div>
    @if($message)
        <div class="alert alert-{{ $type }}">
            {{ $message }}
        </div>
    @endif
</div>

4. Using the Component

You can use the alert component anywhere in your Blade templates:


<livewire:alert type="success" message="Operation completed successfully!" />
<livewire:alert type="error" message="Something went wrong." />

Step 3: Creating a Reusable Pagination Component

Pagination is a common feature in most applications. Let’s build a reusable pagination component.

1. Generate the Component


php artisan make:livewire Pagination

2. Define the Logic

Open Pagination.php and add the logic for handling paginated data:


<?php

namespace App\Livewire;

use Livewire\Component;
use Livewire\WithPagination;

class Pagination extends Component
{
    use WithPagination;

    public $model;

    public function render()
    {
        $items = $this->model::paginate(10);

        return view('livewire.pagination', [
            'items' => $items,
        ]);
    }
}

3. Create the Blade View

In pagination.blade.php, display the paginated items:


<div>
    <ul>
        @foreach ($items as $item)
            <li>{{ $item->name }}</li>
        @endforeach
    </ul>

    {{ $items->links() }}
</div>

4. Using the Component

To use the pagination component, pass the model dynamically:


<livewire:pagination :model="App\Models\Product" />

Step 4: Best Practices for Reusable Components

1. Accept Dynamic Properties

Use public properties to pass data dynamically into components:


public $title;
public $subtitle;

2. Use Blade Slots

Blade slots allow you to inject dynamic content into components:


<div>
    <h1>{{ $title }}</h1>
    {{ $slot }}
</div>

Use the component


<livewire:header title="Dashboard">
    <p>This is the dashboard content.</p>
</livewire:header>

3. Leverage Component Inheritance

Extend components for shared functionality:


class BaseComponent extends Component
{
    public function log($message)
    {
        // Shared logic
    }
}

Inherit in child components:


class ChildComponent extends BaseComponent
{
    public function someMethod()
    {
        $this->log('Message logged from child component.');
    }
}

Step 5: Refactoring Existing Components

If you have repeated code across components, refactor them into reusable components or traits.

Example: Button Component

Create a simple button component:


php artisan make:livewire Button

Blade View:


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

Use it anywhere:


<livewire:button type="primary">Submit</livewire:button>
<livewire:button type="secondary">Cancel</livewire:button>

Final Output

By building reusable components, you can:

Save time and effort by reusing existing functionality.
Maintain consistency across your application.
Reduce redundancy and make your codebase more maintainable.

Key Features Covered Today

Creating reusable components like alerts, pagination, and buttons.
Passing dynamic properties to Livewire components.
Using Blade slots for flexible content injection.
Best practices for refactoring and modularizing your code.

About

Services

Contact

410 C, Jaina Tower-1, District Center, Janak Puri New Delhi-110058, India.