In this laravel vue js infinite scroll example tutorial, you will learn how to implement infinite page scroll with vue js components in laravel.

Suppose you build a blog application with vue js in laravel. And thousand of posts into your database and want to load all posts on single page when page scroll. So this tutorial will help you to display all posts on infinite page scroll with vue js in laravel.

This laravel infinite scroll vue example guide you from scratch on how to implement laravel infinite scroll vue app.

Laravel Vue JS Infinite Scroll

Follow following steps and implement infinite page scroll application with vue js in laravel:

Step 1: Download Laravel Fresh Setup

First of all, open your terminal and run the following command to download laravel fresh setup for laravel infinite scroll vue js app:

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

Step 2: Setup Database Credentials

In this step, Go to your project root directory and open .env file. Then set up database credential, as follow:

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: Create Migration and Model File

Next step, run the following command on command prompt:

php artisan make:model Post -fm

This command will create post model, migration, and factory file into your project.

After that, Go to app/database/migrations and find posts migration file. Then open it and update the following code into your posts migration file:

use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
class CreatePostsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('posts', function (Blueprint $table) {
            $table->bigIncrements('id');
            $table->string('title');
            $table->string('slug');
            $table->timestamps();
        });
    }
    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('posts');
    }
}

After creating migration, open command prompt and run the following command:
php artisan migrate
This command will create tables into your database.

Step 4: Generate Dummy Data

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

/** @var \Illuminate\Database\Eloquent\Factory $factory */
use App\Post;
use Faker\Generator as Faker;
$factory->define(Post::class, function (Faker $faker) {
    return [
        'title' => $faker->word,
        'slug' => strtolower($faker->word)
    ];
});

Next open terminal and run following command to generate dummy data for posts table:
php artisan tinker
//then
factory(\App\Post::class,200)->create()

Step 5: Add Route

In this step, Open web.php file, which is located inside blog/routes folder. And add the following routes into your web.php file:

Route::get('posts', 'PostController@index');

Step 6: Create Controller By Command

Again open a command prompt, to run the following command:

php artisan make:controller PostController

This command will create PostController inside app/Http/Controllers/ folder

Now, open your PostController and update the following methods into your PostController File:

namespace App\Http\Controllers;
use Illuminate\Http\Request;
class PostController extends Controller
{
    public function index()
    {
        $data = \App\Post::orderBy('id')->paginate(10);
        return response()->json($data);
    }
}

Step 7:  Configuration Vue JS

Now, you need setup Vue js. So open your terminal and run the following commands one by one:

Install npm:

npm install

Install vue-resource:

npm install vue-resource
Install vue-infinite-loading:

npm install vue-infinite-loading

Step 8: Update app.js And Default Components

Go to resources/assets/js/ folder and find the app.js file inside this directory. Then update the following code into your app.js file:

resources/assets/js/app.js