Laravel Livewire Search With Pagination Example




Laravel Livewire Search With Pagination Example

Hi Guys,

In this tutorial,I will learn you how to create search with pagination livewire can easy and simply use search box in livewire laravel.

Step 1 : Install Laravel 7

First step,you can install laravel 7 can below this command in your terminal.

composer create-project --prefer-dist laravel/laravel blog

Step 2 : Seed Database

In this step,you can required to many record in search box.then provide to laravel default user factory.add this code databaseeder.php file


public function run()




Then call php artisan db:seed and you’ll have 500 users add in user table.

Step 3 : Create Component

Now here we will create livewire component using their command. so run bellow command to create contact us form component.

php artisan make:livewire search

Now they created fies on both path:



namespace App\Http\Livewire;

use Livewire\Component;

use Livewire\WithPagination;

use App\User;

class Search extends Component


use WithPagination;

public $searchTerm;

public function render()


$searchTerm = '%'.$this->searchTerm.'%';

return view('',[

'users' => User::where('name','like', $searchTerm)->paginate(10)





<div class="container">

<div class="row">

<div class="col-md-12">

<input type="text" class="form-control" placeholder="Search" wire:model="searchTerm" />

<table class="table table-bordered" style="margin: 10px 0 10px 0;">





@foreach($users as $user)



{{ $user->name }}



{{ $user->email }}





{{ $users->links() }}




Step 4 : Create Route

you can create to default blade file route in web.php file.


Route::get('/search-box', function () {

return view('searchbox');


Step 5 : Create View File

you can create blade file for call form route. in this file we will use @livewireStyles, @livewireScripts and @livewire('file-form'). so let's add it.


<!DOCTYPE html>





<link rel="stylesheet" href="{{ asset('css/app.css') }}">



<div class="container mt-4">

<div class="row">

<div class="col-md-8 offset-2">

<div class="card">

<div class="card-header bg-success text-white ">

<strong>Search with Laravel Livewire -</strong>


<div class="card-body">








<script src="{{ asset('js/app.js') }}"></script>



Now you can run using bellow command:

php artisan serve

Open bellow URL:


It will help you...

#Laravel 7


#Laravel 6