Build reactive server-rendered components with Livewire: live search, forms, and pagination.
Livewire — Full-Stack Components
composer require livewire/livewire
php artisan make:livewire SearchPosts
class SearchPosts extends Component {
public string $query = "";
public int $perPage = 10;
// Runs when $query changes
public function updatedQuery(): void {
$this->resetPage();
}
public function render(): View {
return view("livewire.search-posts", [
"posts" => Post::where("title", "like", "%" . $this->query . "%")
->paginate($this->perPage),
]);
}
}
// resources/views/livewire/search-posts.blade.php
<div>
<input wire:model.live="query" placeholder="Search...">
@foreach ($posts as $post)
<h3>{{ $post->title }}</h3>
@endforeach
{{ $posts->links() }}
</div>