Laravel 8 Livewire Load More On Page Scroll Example

In this tutorial you will learn about the Laravel 8 Livewire Load More On Page Scroll Example and its application with practical example.

In this Laravel 8 Livewire Load More On Page Scroll Example Tutorial I’ll show you how to implement infinity scroll or dynamix ajax load more pagination on page scroll in laravel using livewire. In this tutorial you will learn to implement dynamic load more pagination in laravel using livewire package. In this step by step guide I’ll share example of ajax load more or infinity scroll in laravel using livewire package.

Table Of Contents−

Laravel 8 Livewire Load More On Page Scroll Example

In this step by step tutorial I will demonstrate you with example to create dynamix ajax load more pagination on page scroll in laravel using livewire. Please follow the instruction given below:

Step 1: Install Laravel 8 App

Step 2: Connecting App to Database
Step 3: Run Migration and Add Dummy Data
Step 4: Install Livewire Package

Step 5: Create Load More Component using Artisan
Step 6: Make Route
Step 7: Create Blade View File

Step 8: Run Development Server

Step 1: Install Laravel 8 App

First of all we need to create a fresh laravel project, download and install Laravel 8 using the below command

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

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

Step 2: Connecting App to Database

Now, lets create a MySQL database and connect it with laravel application. After creating database we need to set database credential in application’s .env file.

DB_CONNECTION=mysql  
DB_HOST=127.0.0.1  
DB_PORT=3306  
DB_DATABASE=here your database name here 
DB_USERNAME=here database username here 
DB_PASSWORD=here database password here

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=here your database name here

DB_USERNAME=here database username here

DB_PASSWORD=here database password here

Step 3: Run Migration and Add Dummy Data

Now, run following command to migrate database schema.

php artisan migrate

1	php artisan migrate

Now, run the following command to generate fake data using laravel faker as follow:

php artisan tinker

1	php artisan tinker

Then

User::factory()->count(100)->create()

1	User::factory()->count(100)->create()

Step 4: Install Livewire Package

In this step, we will install Livewire Package via the composer dependency manager. Use the following command to install Livewire Package.

composer require livewire/livewire

1	composer require livewire/livewire

Step 5: Create Load More Component using Artisan

Now, we will create a livewire load more component using following artisan command:

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

1	php artisan make:livewire load-more-user-list

The above command will create a component on the following path:

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

1 2	app/Http/Livewire/LoadMoreUserList.php resources/views/livewire/load-more-user-list.blade.php

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

<?php
   
namespace App\Http\Livewire;
   
use Livewire\Component;
use App\Models\User;
   
class LoadMoreUserList extends Component
{
    public $perPage = 12;
    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-list', ['users' => $users]);
    }
}

<?php

namespace App\Http\Livewire;

use Livewire\Component;

use App\Models\User;

class LoadMoreUserList extends Component

{

public $perPage = 12;

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-list', ['users' => $users]);

}

Now, go to resources/views/livewire folder and open load-more-user-list.blade.php file. Then add the following code into your load-more-user-list.blade.php file:

<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>

<div>

<thead>

<tr>

<th>Email</th>

</tr>

</thead>

<tbody>

@foreach($users as $user)

<tr>

<td>{{ $user->email }}</td>

</tr>

@endforeach

</tbody>

</table>

</div>

Step 6: Make Route

After this, we need to define routes in “routes/web.php” file. Lets open “routes/web.php” file and add the following routes in it.

routes/web.php

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

Route::get('/load-more-scroll', function () {

return view('lists');

});

Step 7: Create View File

In this step we will create a blade view file. Go to resources/views/folder and create a blade view files that name lists.blade.php file. Then put the following code into your lists.blade.php file:

<!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 8 Livewire Load More Data on Page Scroll</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/css/bootstrap.min.css">
<!-- Styles -->
<style>
html, body {
background-color: #fff;
color: #636b6f;
font-family: 'Nunito', sans-serif;
font-weight: 200;
height: 100vh;
margin: 0;
}
.full-height {
height: 100vh;
}
.flex-center {
align-items: center;
display: flex;
justify-content: center;
}
.position-ref {
position: relative;
}
.top-right {
position: absolute;
right: 10px;
top: 18px;
}
.content {
text-align: center;
}
.title {
font-size: 84px;
}
.links > a {
color: #636b6f;
padding: 0 25px;
font-size: 13px;
font-weight: 600;
letter-spacing: .1rem;
text-decoration: none;
text-transform: uppercase;
}
.m-b-md {
margin-bottom: 30px;
}
</style>
</head>
<body>
<div class="container mt-5">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">
<h2>Laravel 8 Livewire Load More Data on Page Scroll</h2>
</div>
<div class="card-body">
@if (session()->has('message'))
<div class="alert alert-success">
{{ session('message') }}
</div>
@endif
@livewire('load-more-user-list')
</div>
</div>
</div>
</div>
</div>
@livewireScripts
<script type="text/javascript">
window.onscroll = function(ev) {
if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
window.livewire.emit('load-more');
}
};
</script>
</body>
</html>

<!DOCTYPE html>

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

<head>

<title>Laravel 8 Livewire Load More Data on Page Scroll</title>

<style>

html, body {

background-color: #fff;

color: #636b6f;

font-family: 'Nunito', sans-serif;

font-weight: 200;

height: 100vh;

margin: 0;

}

.full-height {

height: 100vh;

}

.flex-center {

align-items: center;

display: flex;

justify-content: center;

}

.position-ref {

position: relative;

}

.top-right {

position: absolute;

right: 10px;

top: 18px;

}

.content {

text-align: center;

}

.title {

font-size: 84px;

}

.links > a {

color: #636b6f;

padding: 0 25px;

font-size: 13px;

font-weight: 600;

letter-spacing: .1rem;

text-decoration: none;

text-transform: uppercase;

}

.m-b-md {

margin-bottom: 30px;

}

</style>

</head>

<body>

<h2>Laravel 8 Livewire Load More Data on Page Scroll</h2>

</div>

@if (session()->has('message'))

</div>

@endif

@livewire('load-more-user-list')

</div>

@livewireScripts

window.onscroll = function(ev) {

if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {

window.livewire.emit('load-more');

}

};

</script>

</body>

</html>

Step 8: Run Development Server

Now we are ready to run our example so lets start the development server using following artisan command –

php artisan serve

1	php artisan serve

Now, open the following URL in browser to see the output –

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

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

AngularJS

CodeIgniter

Laravel

Node Js

Wordpress

More Blog

Learn

ABOUT PAGES

Laravel 8 Livewire Load More On Page Scroll Example