Laravel 11 Livewire 3 Query Strings for State Management

In this tutorial, I will show you how to use query strings in Laravel 11 Livewire 3 to maintain state across page reloads. Query strings allow us to persist component properties in the URL, making it easier to share links with specific search queries, filters, or pagination states.

Let’s see how to implement this feature step by step.

Laravel 11 Livewire 3 Query Strings for State Management

If you haven’t installed Livewire yet, install it using Composer:

composer require livewire/livewire

Generate a Livewire component named SearchUsers:

Open app/Livewire/SearchUsers.php and update the code:

namespace App\Livewire;

use Livewire\Component;
use App\Models\User;

class SearchUsers extends Component
{
    public $search = '';

    // Enable query string for the search property
    protected $queryString = ['search'];

    public function render()
    {
        $users = User::where('name', 'like', '%' . $this->search . '%')->get();

        return view('livewire.search-users', compact('users'));
    }
}

Here’s what happens:

• The $queryString property makes search persist in the URL (?search=John).
• When you refresh the page, Livewire will read the query string and keep the search term.

Open resources/views/livewire/search-users.blade.php and add the following code:

<div>
    <input type="text" wire:model.debounce.500ms="search" placeholder="Search users..." class="form-control">

    <ul>
        @foreach($users as $user)
            <li>{{ $user->name }}</li>
        @endforeach
    </ul>
</div>

wire:model.debounce.500ms="search" ensures that Livewire waits 500ms after typing before updating the query string.

Now, include the Livewire component in a Blade view, like resources/views/welcome.blade.php:

@livewire('search-users')

• Visit http://127.0.0.1:8000 and type in the search box.
• You’ll see the URL update with ?search=John (if you type "John").
• Refresh the page, and the search term remains!
• You can also share the URL, and the search result will be preloaded.

You might also like:

• Read Also: Laravel 11 Livewire 3 Search: Build a Dynamic Search Feature
• Read Also: How to Search with Pagination in Laravel 10 Vue 3
• Read Also: Laravel 10 Select2 Autocomplete Search Using Ajax
• Read Also: How to Search Comma Separated Values in Laravel