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.

Table Of Contents−

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

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

composer create-project laravel/laravel laravel-vue-infinte-scroll --prefer-dist

1	composer create-project laravel/laravel laravel-vue-infinte-scroll --prefer-dist

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.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=db
DB_USERNAME=root
DB_PASSWORD=

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=db

DB_USERNAME=root

DB_PASSWORD=

Create Model and Run Migration

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

php artisan make:model Product -m

1	php artisan make:model Product -m

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

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreateProductsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('products', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->string('description');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('products');
    }
}

<?php

use Illuminate\Database\Migrations\Migration;

use Illuminate\Database\Schema\Blueprint;

use Illuminate\Support\Facades\Schema;

class CreateProductsTable extends Migration

{

/**

* Run the migrations.

* @return void

public function up()

{

Schema::create('products', function (Blueprint $table) {

$table->id();

$table->string('name');

$table->string('description');

$table->timestamps();

});

}

/**

* Reverse the migrations.

* @return void

public function down()

{

Schema::dropIfExists('products');

}

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

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Product extends Model
{
    use HasFactory;
    protected $fillable = [
        'name',
        'description'
    ];        
}

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;

use Illuminate\Database\Eloquent\Model;

class Product extends Model

{

use HasFactory;

protected $fillable = [

'name',

'description'

];

}

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

php artisan migrate

1	php artisan migrate

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:

php artisan make:factory ProductFactory --model=Product

1	php artisan make:factory ProductFactory --model=Product

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

<?php

namespace Database\Factories;

use App\Models\Product;
use Illuminate\Database\Eloquent\Factories\Factory;

class ProductFactory extends Factory
{
    /**
     * The name of the factory's corresponding model.
     *
     * @var string
     */
    protected $model = Product::class;

    /**
     * Define the model's default state.
     *
     * @return array
     */
    public function definition()
    {
        return [
            'name' => $this->faker->name,
            'description' => $this->faker->text
        ];
    }
}

<?php

namespace Database\Factories;

use App\Models\Product;

use Illuminate\Database\Eloquent\Factories\Factory;

class ProductFactory extends Factory

{

/**

* The name of the factory's corresponding model.

* @var string

protected $model = Product::class;

/**

* Define the model's default state.

* @return array

public function definition()

{

return [

'name' => $this->faker->name,

'description' => $this->faker->text

];

}

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

AngularJS

CodeIgniter

Laravel

Node Js

Wordpress

More Blog

Learn

ABOUT PAGES

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