Skip to content

Livewire

Works on Livewire 3 and 4. The adapter registers itself only when Livewire is installed.

See it running

advanced-filters.laratribe.com/livewire — filtering with no page reload, driven by the same model as the Blade page.

blade
<livewire:advanced-filters::panel :model="\App\Models\Product::class" />

The component owns the active rows and dispatches advanced-filters-updated. A host table component listens and re-queries:

php
use Livewire\Attributes\On;
use Laratribe\AdvancedFilters\Support\FilteredQuery;

#[On('advanced-filters-updated')]
public function updateFilters(array $filters): void
{
    $this->filters = $filters;
    $this->resetPage();
}

public function render()
{
    $products = FilteredQuery::for(Product::class)->withFilters($this->filters)->paginate(25);

    return view('products.results', compact('products'));
}

Don't load a second Alpine

Livewire bundles Alpine. Loading another copy from a CDN breaks both. Import only the package controller and register it on livewire:init, which fires before Livewire starts Alpine:

js
import { advancedFiltersPanel, advancedFiltersBuilder } from '.../advanced-filters'

document.addEventListener('livewire:init', () => {
    window.Alpine.data('advancedFiltersPanel', advancedFiltersPanel)
    window.Alpine.data('advancedFiltersBuilder', advancedFiltersBuilder)
})

Why it's Alpine-enhanced

The two-step builder runs client-side so there's no round trip per keystroke. Only addFilter hits the server — where the row goes through the same normalizeFilters() path as a full request. Field definitions are re-derived server-side on every render and never trusted from the client.

Mount arguments

modelRequired. A class implementing Filterable
activePre-applied rows; re-validated on mount
viewRender your own markup instead of the packaged panel

Livewire 4 note

v4's component finder treats any name containing :: as namespace::component and resolves it only through registered namespaces — it never consults components registered the v3 way. The provider detects the version and registers accordingly, so advanced-filters::panel works on both. Nothing for you to do; worth knowing if you write your own ::-named components.

Need extra server-side behaviour? Extend the Livewire panel.

Released under the MIT License.