In this post we’ll walk through how to implement pagination with Livewire 3 in a Laravel app. No complex AJAX or page-reloads: just PHP and Livewire, making your UI dynamic and smooth.
Why Use Livewire Pagination
- Standard pagination refreshes the whole page; Livewire keeps it seamless.
- Less JavaScript required – developers stay in the Laravel and PHP ecosystem.
- Great user experience: quick interaction, less waiting, modern feel.
Installation & Usage
Install / Setup Livewire
composer require livewire/livewireOnce installed, ensure Livewire’s assets are ready (you may publish if needed).
Generate Livewire Component
php artisan make:livewire user-paginationThis creates two files:
app/Http/Livewire/UserPagination.phpresources/views/livewire/user-pagination.blade.php
Update the Component Logic & View
app/Http/Livewire/UserPagination.php
<?php
namespace App\Http\Livewire;
use Livewire\Component;
use Livewire\WithPagination;
use App\Models\User;
class UserPagination extends Component {
use WithPagination; /** * Write code on Method * * @return response() */
public function render() {
return view('livewire.user-pagination', [ 'users' => User::paginate(10)]);
}
}app/Http/Livewire/UserPagination.php
<div>
<table class="table-auto" style="width: 100%;">
<thead>
<tr>
<th class="px-4 py-2">ID</th>
<th class="px-4 py-2">Name</th>
<th class="px-4 py-2">Email</th>
</tr>
</thead>
<tbody>
@foreach ($users as $user)
<tr>
<td class="border px-4 py-2">{{ $user->id }}</td>
<td class="border px-4 py-2">{{ $user->name }}</td>
<td class="border px-4 py-2">{{ $user->email }}</td>
</tr>
@endforeach
</tbody>
</table>
{{ $users->links() }}
</div>
Create Route File
routes/web.php
Now we will create one route for calling our example, so let’s add new route to web.php file as bellow:
Route::get('user-pagination', function () {
return view('default');
});
Create View File
resources/views/default.blade.php
Now we will create blade file for call form route. in this file we will use @livewireStyles, @livewireScripts and @livewire(‘contact-form’).
<!DOCTYPE html>
<html>
<head>
<title>Laravel Livewire Example - sachinsanchania.com</title>
@livewireStyles
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.9.0/tailwind.min.css" integrity="sha512-wOgO+8E/LgrYRSPtvpNg8fY7vjzlqdsVZ34wYdGtpj/OyVdiw5ustbFnMuCb75X9YdHHsV5vY3eQq3wCE4s5+g==" crossorigin="anonymous" />
</head>
<body>
<div class="container">
<div class="card">
<div class="card-header">
Laravel Livewire Example - sachinsanchania.com
</div>
<div class="card-body">
@livewire('user-pagination')
</div>
</div>
</div>
</body>
@livewireScripts
</html>
Run Laravel App
Now you can run using bellow command:
php artisan serve
Open below url using localhost
http://localhost:8000/user-pagination
