Real-Time Forms in Laravel Livewire 3 with wire:model.live

If you’ve been playing around with Laravel Livewire, you’ve probably bumped into wire:model. Well, in version 3, the Livewire team decided to shake things up a bit. Don’t worry—it’s not a bug, but actually a nice performance upgrade.

From “Too Eager” to “Chill by Default”

In Livewire v2, wire:model was live by default. That means every keystroke fired off a request to the server. Cool for instant updates, but your server could easily get hammered with too many requests.

So in v3, they made wire:model deferred by default. The client still updates in real-time, but the server only gets the update once you actually do something—like clicking a submit button.

If you miss the old “super eager” behavior, just use:

<input type="text" wire:model.live="search">

That .live puts it back into the Livewire v2 style.

wire:model vs wire:model.live

• wire:model → waits for an action like submit.
• wire:model.live → syncs instantly with every keystroke.

This is especially handy for things like search boxes, where users expect results as they type.

No Worries, Debounce Has Your Back

“But wait—doesn’t that mean my server is gonna drown in requests again?”
Nope. Livewire automatically adds a 150ms debounce. So it waits a tiny bit after the user stops typing before sending the request.

Want to tweak it? Easy:

<input type="text" wire:model.live.debounce.300ms="userInput">

And if you’re feeling fancy, there’s also .throttle:

• .debounce → waits until the user stops typing.
• .throttle → sends requests at intervals while the user is still typing.

In most cases, debounce is the sweet spot.

Practical Example: Post Search

Let’s say you’re building a post search feature. You don’t want to query the database just because someone typed “a”. A common pattern is to wait for at least 2 characters before running the search.

<div>
    <input type="text"
           wire:model.live.debounce.250ms="query"
           placeholder="Search Posts...">
 
    @if($query && strlen($query) >= 2)
        <div class="posts">
            @foreach($posts as $post)
                <div class="post-item">
                    <strong>{{ $post->title }}</strong> by {{ $post->author }}
                    <span class="year">({{ $post->year }})</span>
                </div>
            @endforeach
 
            @if($posts->isEmpty())
                <p>No posts found for "{{ $query }}"</p>
            @endif
        </div>
    @endif
</div>

And the component:

class PostSearch extends Component
{
    public $query = '';
    public $posts = [];
 
    public function updatedQuery()
    {
        if (strlen($this->query) >= 2) {
            $this->posts = Post::where('title', 'like', '%' . $this->query . '%')
                ->orWhere('author', 'like', '%' . $this->query . '%')
                ->take(15)
                ->get();
        } else {
            $this->posts = collect();
        }
    }
 
    public function render()
    {
        return view('livewire.post-search');
    }
}

Because we’re using wire:model.live, the updatedQuery() method fires on every change. Without .live, it wouldn’t run until a form submission or some other manual trigger.

Bonus: Other Modifiers

Besides .live, you can also play with:

• wire:model.blur → updates when the field loses focus.
• wire:model.change → updates on value change (great for dropdowns).

Personally, I think this change makes Livewire a lot friendlier. In v2, it sometimes felt like your server was being pranked by a user spamming “asdfghjkl” into your input. In v3, the default is smarter, and you still have the option to go full “live” when you need it.

If you’re building search bars or any input that needs real-time syncing, wire:model.live is a must-try. 🚀