Laravel Livewire Load More Example




Laravel Livewire Load More Example

Hello Friends,

In this blog, I will show you how to load more data with scroll using livewire laravel application. We will show page scrolling with loading data in laravel livewire.In this artical, I will learn you load more data in laravel livewire. You can scroll page then load more data in livewire at that time use bellow example.

Livewire is a full-stack framework for Laravel that makes building dynamic interfaces simple, without leaving the comfort of Laravel.Livewire relies solely on AJAX requests to do all its server communicaton.

Here I will give full example for load more data livewire in laravel,So Lets follow the bellow step.

Step 1 : Install Laravel App

In First step, We need to get fresh laravel version application using bellow command. So Let's open terminal and run bellow command.

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

Step 2 : Setup Database Configuration

After successfully install laravel app thenafter configure databse setup. We will open ".env" file and change the database name, username and password in the env file.







Step 3 : Install Livewire

In this step, You will simply install livewire to our laravel application using bellow command:

composer require livewire/livewire

Step 4 : Create Component

Now, You can create livewire component using bellow command, So Let's run bellow command to create user component:

php artisan make:livewire users

Now they created fies on both path:



Now first file we will update as bellow for Users.php file.



namespace App\Http\Livewire;

use Livewire\Component;

use App\User;

class Users extends Component


public $perPage = 8;

protected $listeners = [

'load-more' => 'loadMore'


public function loadMore()


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


public function render()


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


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



Step 5 : Add Route

now, we need to add route for list users in laravel application. so open your "routes/web.php" file and add following route.



Step 6 : Create View

Here, we will create blade file for show users list. in this file we will use @livewireStyles, @livewireScripts and @livewire('users'). so let's add it.



<div class="table-responsive">

<table class="table table-bordered">









@foreach($users as $user)


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

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

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








<!DOCTYPE html>




<script src="{{ asset('js/app.js') }}" defer></script>

<link href="{{ asset('css/app.css') }}" rel="stylesheet">




<div class="container">

<div class="row justify-content-center">

<div class="col-md-8">

<div class="card">

<div class="card-header">

<h2>Laravel Livewire Load More with Scroll -</h2>


<div class="card-body">

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

<div class="alert alert-success">

{{ session('message') }}










<script type="text/javascript">

window.onscroll = function(ev) {

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







Now we are ready to run our example so run bellow command for quick run:

php artisan serve

Now you can open bellow URL on your browser:


It will help you..

#Laravel 7


#Laravel 6