Hi All,

In this tutorial we will go over the demonstration of laravel livewire load more data example. i would like to share with you laravel livewire onscroll load more data. you will learn auto load more data on page scroll laravel livewire. let’s discuss about laravel 8 livewire load more example. you will do the following things for load more data on page scroll in laravel livewire.

In this tutorial, we will create simple load more data on scroll example using laravel livewire. you can use laravel livewire load more with laravel 6, laravel 7 and laravel 8 version.

Here, i will give you very simple example to creating load more data on window scroll event example with laravel. we will use only livewire/livewire package.

So, let’s follow bellow step and you will get bellow layout:

Step 1: Install Laravel 8

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

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

Step 2: Create Dummy Records using Tinker Factory

you 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 load more component.

php artisan make:livewire load-more-user

Now they created fies on both path:

app/Http/Livewire/LoadMoreUser.php
resources/views/livewire/load-more-user.blade.php

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

app/Http/Livewire/LoadMoreUser.php

<?php

namespace App\Http\Livewire;

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

class LoadMoreUser extends Component
{
    public $perPage = 15;
    protected $listeners = [
        'load-more' => 'loadMore'
    ];

    /**
     * Write code on Method
     *
     * @return response()
     */
    public function loadMore()
    {
        $this->perPage = $this->perPage + 5;
    }

    /**
     * Write code on Method
     *
     * @return response()
     */
    public function render()
    {
        $users = User::latest()->paginate($this->perPage);
        $this->emit('userStore');

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

resources/views/livewire/load-more-user.blade.php

<div>
    <div class="table-responsive">
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th>No.</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>
</div>

#laravel #php #web-development #programming #developer