Laravel 11 Livewire 3 Pagination Example

Websolutionstuff | Mar-06-2025 | Categories : Laravel

In this guide, I will show you how to implement pagination in Laravel 11 using Livewire 3. Pagination helps display large datasets in smaller chunks, improving performance and user experience. Livewire makes pagination dynamic, meaning users can navigate between pages without reloading the page.

Step-by-Step Guide to Pagination in Laravel 11 with Livewire 3

Laravel 11 Livewire 3 Pagination

Step 1: Install Laravel 11

If Laravel 11 is not installed, I install it using:

composer create-project laravel/laravel livewire-pagination
cd livewire-pagination

Step 2: Install Livewire 3

Next, I install Livewire 3 in my Laravel project:

composer require livewire/livewire

Step 3: Create a Model and Migration

For this example, I create a Post model with a migration to store sample data:

php artisan make:model Post -m

I then update the migration file database/migrations/xxxx_xx_xx_xxxxxx_create_posts_table.php

public function up()
{
    Schema::create('posts', function (Blueprint $table) {
        $table->id();
        $table->string('title');
        $table->text('content');
        $table->timestamps();
    });
}

I run the migration:

php artisan migrate

Step 4: Seed the Database with Sample Data

I create a database seeder for testing:

php artisan make:seeder PostSeeder

I open database/seeders/PostSeeder.php and add:

use Illuminate\Database\Seeder;
use App\Models\Post;
use Illuminate\Support\Str;

class PostSeeder extends Seeder
{
    public function run()
    {
        Post::factory()->count(50)->create();
    }
}

I also create a factory for dummy posts:

php artisan make:factory PostFactory --model=Post

I update database/factories/PostFactory.php:

use Illuminate\Database\Eloquent\Factories\Factory;
use App\Models\Post;

class PostFactory extends Factory
{
    protected $model = Post::class;

    public function definition(): array
    {
        return [
            'title' => $this->faker->sentence,
            'content' => $this->faker->paragraph,
        ];
    }
}

Now, I seed the database:

php artisan db:seed --class=PostSeeder

Step 5: Create a Livewire Component for Pagination

I generate a Livewire component:

php artisan make:livewire PostPagination

This creates:

app/Livewire/PostPagination.php (Component class)
resources/views/livewire/post-pagination.blade.php (Component view)

Step 6: Implement Pagination in Livewire Component

I open app/Livewire/PostPagination.php and update it:

namespace App\Livewire;

use Livewire\Component;
use Livewire\WithPagination;
use App\Models\Post;

class PostPagination extends Component
{
    use WithPagination;

    public function render()
    {
        $posts = Post::paginate(5); // Display 5 posts per page
        return view('livewire.post-pagination', compact('posts'));
    }
}

Step 7: Display Paginated Data in the Blade View

I open resources/views/livewire/post-pagination.blade.php and update it:

<div>
    <h2>Post List</h2>
    
    <ul>
        @foreach($posts as $post)
            <li><strong>{{ $post->title }}</strong><br>{{ $post->content }}</li>
        @endforeach
    </ul>

    {{ $posts->links() }}
</div>

Step 8: Include Livewire Component in a Blade Template

I add the Livewire component to resources/views/welcome.blade.php:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Laravel Livewire Pagination</title>
    @livewireStyles
</head>
<body>
    <div class="container">
        <h1>Laravel 11 Livewire 3 Pagination</h1>
        <livewire:post-pagination />
    </div>
    @livewireScripts
</body>
</html>

Step 9: Run Laravel Development Server

I start the Laravel server: