How to Create Infinite Scroll Load More in Laravel 8 Vue JS App

In this tutorial you will learn about the How to Create Infinite Scroll Load More in Laravel 8 Vue JS App and its application with practical example.

In this How to Create Infinite Scroll Load More in Laravel 8 Vue JS App tutorial I’ll show you how to create Infinite scroll load more in laravel 8 with Vue Js. In this tutorial you will learn to create Infinite scroll pagination or load more in laravel Vue Js . In this step by step guide I’ll share example of Vue JS Infinite Scroll Load More in laravel 8.

How to Create Infinite Scroll Load More in Laravel 8 Vue JS App

In this step by step tutorial I will demonstrate to create infinite scroll or load more on page scroll with vue js and laravel 8 applicatons. Please follow the instruction given below:

  • Create Laravel Project
  • Add Database Details
  • Create Model and Run Migration
  • Generate Dummy Data
  • Generate and Configure Controller
  • Create Route
  • Install Laravel Vue UI
  • Install Vue Infinite Loading
  • Set Up Vue JS in Laravel
  • Test Application

Install Laravel Project

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

Add Database Details

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.

Create Model and Run Migration

Now, in this step we will create model and migration file. Please run the following command:

Further, open the database/migrations/create_products_table.php file and add the table values within the migration of the product:

Open app/Http/Models/Product.php file and update the following code:

Now, run the migration to create database table using following artisan command:

Generate Fake Data

Next step, generate fake or dummy data for posts table. So go to database/factories folder and find ProductFactory .php file. After that, open and update the following code in ProductFactory .php file as follow:

Further, put the below code in database\factories\ProductFactory.php:

Use the tinker command on the console to generate the test data into the database:

Generate and Configure Controller

Now, lets create a controller named ProductController using command given below –

Open app/Http/Controllers/ProductController.php file and update the below code:

Create 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

Install Laravel Vue UI

In this step we will install laravel Vue Js UI using following commands:

Now run below command to install the required npm dependencies:

Install Vue Infinite Loading

Now we will install Vue infinite loading  using following command.

Set Up Vue JS in Laravel

Create InfiniteScrollComponent.vue file in resources/js/components/ folder, add the following code in resources/js/components/InfiniteScrollComponent.vue file:

Next, Install the vue-resource package for enabling Vue single file components:


Then, open resources/js/app.js file and register the Vue JS component:

Further, add the vue component inside the resources/views/welcome.blade.php file:

Add following code in resources/views/layout/app.blade.php:

Test Application

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

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

In this tutorial we have learn about the How to Create Infinite Scroll Load More in Laravel 8 Vue JS App and its application with practical example. I hope you will like this tutorial.