Create Pagination With Laravel Livewire Example Tutorial

Hello Devs, in this tutorial i am going to discuss about Laravel Livewire with pagination. So i will teach you how we can create a pagination in Laravel application with livewire framework. You will know that Livewire is a full-stack framework for Laravel framework that makes building dynamic interfaces simple, without leaving the comfort of Laravel.

If you are going to use livewire with laravel then you don't worry about writing jquery ajax code, livewire will help to write very simple way jquery ajax code using php without any bullshit and also without page refresh laravel validation will works, form will submit etc.

I will use only livewire/livewire package. So let's create pagination in Laravel without page refresh.

Step 1 : Install Laravel 8

First we need to get fresh Laravel 8 version application using bellow command, So open your terminal OR command prompt and run bellow command:

laravel new blog

Step 2 : Create Dummy Records 

We need to run following command to create dummy records in your users table. let's run both command:

php artisan tinker
User::factory()->count(100)->create()

Step 3: Install Livewire

Now in this step, we will simply install livewire to our laravel 8 application using bellow command:

composer require livewire/livewire

Step 4: Create Component

Now here we will create livewire component using their command. so run bellow command to create pagination component.

php artisan make:livewire user-pagination

Now they created fies on both path:

Now both file we will update as bellow for our contact us form.

app/Http/Livewire/UserPagination.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),
        ]);
    }
}

resources/views/livewire/user-pagination.blade.php

Step 5: Create Route

In this step we will create one route for calling our example, so let's add new route to web.php file as bellow:

routes/web.php

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

Step 6: Create View File

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

resources/views/default.blade.php

Now you can run using bellow command:

php artisan serve

Now visit below url to see the result

Hope it can help you.