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.