Laravel Livewire Pagination Example Tutorial

Throughtout this Laravel 9 Livewire bootstrap pagination example tutorial, we will learn step by step on how to create bootstrap pagination in the Laravel application using Livewire package.

This tutorial will guide you from scratch about how to create a bootstrap pagination with the help of the livewire package in the laravel application. You can use laravel livewire pagination with laravel 6, laravel 7, laravel 8 and laravel 9 version.

Laravel Livewire Bootstrap Pagination Example

This quick and simple tutorial offers you a facile example of a pagination using bootstrap UI design in laravel app with livewire library.

Use to the following steps to implement pagination example in laravel 9 app with livewire:

  • Step 1: Install Laravel App
  • Step 2: Connect App to Database
  • Step 3: Install Livewire Package
  • Step 4: Create User Pagination Component
  • Step 5: Make Routes Livewire Pagination
  • Step 6: Render Pagination in Blade View
  • Step 7 : Create Dummy Records using Tinker Factory
  • Step 8: Run Development Server

Step 1: Install Laravel App

First run the following command in terminal to install laravel fresh app for laravel livewire pagination example app.

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

Now Go inside the app:

cd laravel-livewire

Step 2: Configure Database Credentials

Open the .env file and add your database credentials such as database name, username equally important password:

DB_USERNAME=db user name
DB_PASSWORD=db password

Step 3: Install Livewire Package

In this step, we need to install livewire package to laravel project using the following command:

composer require livewire/livewire

Step 4: Create User Pagination Component

Go to console run the artisan command to create the livewire components:

php artisan make:livewire user-pagination

The above command generated two files on the following path:


Go ahead and place the below code in the app/Http/Livewire/UserPagination.php file:

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),

Next, open resources/views/livewire/user-pagination.blade.php file, add the following code:

    <table class="table-auto" style="width: 100%;">
          <th class="px-4 py-2">ID</th>
          <th class="px-4 py-2">Name</th>
          <th class="px-4 py-2">Email</th>
        @foreach ($users as $user)
            <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>
    {{ $users->links() }}

Step 5: Make Routes Livewire Pagination

Open routes/web.php file and define the route to access the multistep form from view:

Route::get('user-pagination', function () {
    return view('default');

Step 6: Render Pagination in Blade View

Add below code in resources/views/default.blade.php file:

<!DOCTYPE html>
    <title>Laravel Livewire Example </title>
    <link rel="stylesheet" href="" integrity="sha512-wOgO+8E/LgrYRSPtvpNg8fY7vjzlqdsVZ34wYdGtpj/OyVdiw5ustbFnMuCb75X9YdHHsV5vY3eQq3wCE4s5+g==" crossorigin="anonymous" />
<div class="container">
    <div class="card">
      <div class="card-header">
        Laravel Livewire Example
      <div class="card-body">

Step 7 : Create Dummy Records using Tinker Factory

Next, Navigate to database/factories and open UserFactory.php here the code which will generate dummy records using tinker factory command.

So, you just need to run the following command to generate fake data using faker as follow:

php artisan tinker

Step 8: Run Development Server

Finally, we need to run the following PHP artisan serve command to start laravel livewire pagination example app:

php artisan serve
If we want to run the project diffrent port so use this below command 
php artisan serve --port=8080  

Next, open browser and hit the following URL into browser:


The Laravel Livewire pagination Example Tutorial is over; in this tutorial, we learned the easiest way to integrate pagination example in laravel application using the livewire library.