Laravel 7 Livewire Load More Tutorial From Scratch

In this tutorial you will learn about the Laravel 7 Livewire Load More Tutorial From Scratch and its application with practical example.

In this Laravel 7 Livewire Load More Tutorial From Scratch tutorial I’ll show you how to implement infinity scroll or dynamix ajax load more 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 7 Livewire Load More Tutorial From Scratch

Step 1: Download Laravel App
Step 2: Add Database Detail

Step 3: Create Model & Migration using Artisan
Step 4: Install Livewire Package
Step 5: Create Load More Component using Artisan

Step 6: Add Route
Step 7: Create Blade View File
Step 8: Run Development Server

Step 1: Install Laravel App

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

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

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

Step 2: Add Database Detail

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

In this step we will run the migration to create database table using following artisan command:

php artisan migrate

1	php artisan migrate

This command will create table into your database.

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

php artisan tinker

1	php artisan tinker

then

factory(\App\User::class,50)->create()

1	factory(\App\User::class,50)->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 load more component using following artisan command:

php artisan make:livewire users

1	php artisan make:livewire users

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

app/Http/Livewire/Users.php
resources/views/livewire/users.blade.php

1 2	app/Http/Livewire/Users.php resources/views/livewire/users.blade.php

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

<?php
 
namespace App\Http\Livewire;
 
use Livewire\Component;
use App\User;
 
class Users extends Component
{
    public $perPage = 7;
    protected $listeners = [
        'load-more' => 'loadMore'
    ];
 
    public function loadMore()
    {
        $this->perPage = $this->perPage + 7;
    }
 
    public function render()
    {
        $users = User::paginate($this->perPage);
        $this->emit('userStore');
        return view('livewire.users',['users' => $users]);
    }
}

<?php

namespace App\Http\Livewire;

use Livewire\Component;

use App\User;

class Users extends Component

{

public $perPage = 7;

protected $listeners = [

'load-more' => 'loadMore'

];

public function loadMore()

{

$this->perPage = $this->perPage + 7;

}

public function render()

{

$users = User::paginate($this->perPage);

$this->emit('userStore');

return view('livewire.users',['users' => $users]);

}

Now, go to resources/views/livewire folder and open users.blade.php file. Then add the following code into your users.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: Add 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('livewire.lists');
});

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

return view('livewire.lists');

});

Step 7: Create View File

Now go to resources/views/livewire folder and create one blade view files lists.blade.php file. Then put the following code in 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 Livewire 7 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 Livewire 7 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('users')
</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 Livewire 7 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 Livewire 7 Load More Data on Page Scroll</h2>

</div>

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

</div>

@endif

@livewire('users')

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

If you want to run the project diffrent port so use this below command 

php artisan serve --port=8080

php artisan serve

If you want to run the project diffrent port so use this below command

php artisan serve --port=8080

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 7 Livewire Load More Tutorial From Scratch