Laravel 9 Livewire Load More Pagination Example on Page Scroll

by

Throughout Laravel Livewire load more data pagination on page scroll tutorial we are going to share how to make load more data on page scroll in laravel 9 with livewire.

Many times we need load data on page scroll or infinity page scroll in laravel app with livewire. So, here the step by step guide of Laravel Livewire Load More OnScroll tutorial will help you implement the load more data on the scroll from scratch.

Laravel Livewire Load More On Page Scroll Example

Follow the following steps to integrate load more on page scroll in laravel with livewire package;

  • Step 1: Install Laravel App
  • Step 2: Connect App to Database
  • Step 3: Run Migration and Add Dummy Records
  • Step 4: Install Livewire Package
  • Step 5: Create Load More Component
  • Step 6: Make Routes
  • Step 7: Create Blade File
  • Step 8: Run Development Server

Install Laravel App

First create new laravel 9 application adding the following command in terminal.

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

Now Go into the app:

cd laravel-livewire-pagination

Connect App to Database

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

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=db name
DB_USERNAME=db user name
DB_PASSWORD=db password

Run Migration and Add Dummy Records

In this step, open command prompt and run the following command to create the table into database:

php artisan migrate

This command will create table into database.

After that, open terminal and run the following command to generate fake data using laravel faker as follow:

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

Install Livewire Package

Use the composer command to install livewire library in laravel app:

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

composer require livewire/livewire

Create Load More Component

In this step, create the livewire components for load more data using the following command in laravel. So Open cmd and run the following command:

php artisan make:livewire load-more-user

This command will create the following components on the following path:

app/Http/Livewire/LoadMoreUser.php

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

Now, Navigate to app/Http/Livewire folder and open LoadMoreUser.php file. Then add the following code into LoadMoreUser.php file:

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>

Make Routes

In this step, Navigate to routes folder and open web.php. Then add the following routes into web.php file:

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

Create Blade File

In this step, navigate to resources/views/folder and create one blade view files that name lists.blade.php file. Then add the following code into lists.blade.php file:

<!DOCTYPE html>
<html>
<head>
    <title>Laravel Livewire Example - codingdriver.com</title>
    @livewireStyles
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
    
<div class="container">
    
    <div class="card">
      <div class="card-header">
        Laravel Livewire Example - codingdriver.com
      </div>
      <div class="card-body">
        @livewire('load-more-user')
      </div>
    </div>
        
</div>
    
</body>
  
@livewireScripts
  
<script type="text/javascript">
      window.onscroll = function(ev) {
          if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
              window.livewire.emit('load-more');
          }
      };
</script>
  
</html>

Note that, if you want to add HTML(blade views), CSS, and script code into your livewire files. So, you can use @livewireStyles, @livewireScripts, and @livewire(‘ blade views’).

Run Development Server

Finally, we need to run the following PHP artisan serve command to start laravel livewire load more data on page scroll app:

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

Now, we are ready to run laravel livewire load more on page scroll app. So open browser and hit the following URL into browser:

http://localhost:8000/load-more-scroll

The Laravel Livewire Load More OnScroll tutorial is over; in this tutorial, we learned the easiest way to integrate on scroll loads more in the laravel application using the livewire library.

Leave a Comment