Laravel 11 Livewire Infinite Page Scroll Tutorial

by

In this Laravel 11 Livewire Infinite Page Scroll Tutorial guide, I’ll show you how to integrate a straightforward Livewire component with Alpine.js to enable infinite scrolling for an article list.

Infinite scrolling is a widely-used feature that improves user experience by automatically loading more content as users scroll down a page, eliminating the need for them to click through pagination links to see additional content.

This method is particularly beneficial for presenting extensive datasets or feeds, such as social media timelines or news articles, without relying on traditional pagination.

Let’s see how to build an infinite scrolling page in a Laravel Livewire application step by step:

Step 1: Install Livewire

First, install Livewire by running:

composer require livewire/livewire

Step 2: Create the Infinite Scroll Component

Generate a Livewire component for handling the infinite scroll:

php artisan make:livewire load-more-user-data

Step 3: Implement Infinite Scrolling Logic

Open app/Http/Livewire/LoadMoreUserData.php and add the logic for infinite scrolling:

<?php

namespace App\Http\Livewire;

use Livewire\Component;
use App\Models\User;

class LoadMoreUserData extends Component
{
    public $limitPerPage = 10;

    protected $listeners = [
        'load-more' => 'loadMore'
    ];

    public function loadMore()
    {
        $this->limitPerPage += 6;
    }

    public function render()
    {
        $users = User::latest()->paginate($this->limitPerPage);
        $this->emit('userStore');

        return view('livewire.load-more-user-data', ['users' => $users]);
    }
}

Next, edit resources/views/livewire/load-more-user-data.blade.php to display the data:

<div>
    <table class="table table-striped">
        <thead>
            <tr>
                <th>#Id</th>
                <th>Name</th>
                <th>Email</th>
            </tr>
        </thead>
        <tbody>
            @foreach($users as $user)
            <tr>
                <td>{{ $user->id }}</td>
                <td>{{ $user->name }}</td>
                <td>{{ $user->email }}</td>
            </tr>
            @endforeach
        </tbody>
    </table>
</div>

Step 4: Set Up the Route

In routes/web.php, define a route to serve the view for infinite scrolling:

Route::get('/load-more-users', function () {
    return view('welcome');
});

Step 5: Include Livewire Component in Blade View

Edit resources/views/welcome.blade.php to include the Livewire component and handle infinite scrolling:

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Laravel 11 Livewire Infinite Page Scroll Tutorial</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        html, body {
            height: 99vh;
        }
    </style>
</head>

<body>
    <div class="container mt-5">
        @livewire('load-more-user-data')
    </div>
    @livewireScripts
    <script type="text/javascript">
        window.onscroll = function () {
            if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
                window.livewire.emit('load-more');
            }
        };
    </script>
</body>

</html>

Step 6: Test the Application

Start the Laravel development server with:

php artisan serve

Navigate to http://localhost:8000/load-more-users in your browser to test the infinite scrolling functionality.