📡 You're offline — showing cached content
New version available!
Quick Access
Tutorials Laravel Framework Livewire Components

Livewire Components

6 min read
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>