Integrating Filament with Livewire for a Modern Admin Panel

This article explains how Filament and Livewire can be used together to build a modern, interactive and easily extensible admin panel in Laravel.

Summary

1. Why Filament + Livewire
2. Installing the dependencies
3. Creating a Filament Resource
4. Adding a custom Livewire component
5. Livewire widgets in Filament
6. Best practices
7. Conclusion

Why Filament + Livewire

Filament is built on top of Livewire, which lets you quickly build interactive admin interfaces without JavaScript. Combining the two gives you maximum flexibility for dashboards and complex CRUDs.

Installing the dependencies

composer require filament/filament
composer require livewire/livewire
php artisan filament:install

Creating a Filament Resource

php artisan make:filament-resource Order

Filament will generate the forms and table for the Order model.

Adding a custom Livewire component

php artisan make:livewire StatsWidget

StatsWidget.php

class StatsWidget extends Component
{
    public $ordersCount;

    public function mount()
    {
        $this->ordersCount = Order::count();
    }

    public function render()
    {
        return view('livewire.stats-widget');
    }
}

stats-widget.blade.php

<div class="p-4 bg-white shadow rounded">
    Total orders: {{ $ordersCount }}
</div>

Livewire widgets in Filament

You can include the component in a Filament page:

<livewire:stats-widget />

Or as a custom Filament widget.

Best practices

• Keep Livewire logic separate from Filament Resources.
• Use widgets for statistics.
• Avoid expensive queries in render().

Conclusion

Integrating Filament with Livewire lets you quickly build a modern, interactive, extensible admin panel in Laravel.