Laravel 8.x Infinite Scroll (Load More) Example Tutorial

I was recently assigned to as task to paginate our chat app and other pages that requires pagination. Pagination was great but we want to try something new and in our chat app it is a big no no.So the solution is to create an infinite scroll, which is very common now and you can see this in popular chat applications like facebook messenger. 

In this post, i want to share with you how to create infinite scroll pagination using vue js and laravel 6. we will create step by step vuejs infinite loading data using laravel, so if you are new and then you can do it too. You have to just follow few step.

In this example, i created "posts" table with title and slug. Then i created one get method that will return data in pagination. Then we will write code for vue.js and component, we are using vue-infinite-loading package for infinite loading.

After run this example, you will get layout like as below preview, you can also download source code and check demo too.

Read also: Hierarchical Treeview Category Example in Laravel

Preview:

Step 1 : Install Laravel 6 App

In the first step, we require to get fresh Laravel 6 application using bellow command, So open your terminal OR command prompt and run bellow command:

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

Step 2: Create Post Table and Model

in second step, we have to create migration for "posts" table using Laravel 5.6 php artisan command, so first fire bellow command:

php artisan make:model Post -fm

After this command you will find one file in following path database/migrations and you have to put bellow code in your migration file for create posts table.

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 create migration we need to run above migration by following command:

php artisan migrate

Step 3: Setup Post Factory

We have to save some dummy data. So for inserting dummy data. open below file and paste those following code.

database/factories/PostFactory.php

/** @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)
    ];
});

Now run this below command to save dummy data

php artisan tinker
//then
factory(\App\Post::class,300)->create()

That's it. Then you will see 300 data inserted into post table.

Step 4: Add Route

In this step, we will create one route for getting pagination data. So, let's add a new route to that file.

routes/web.php

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

Step 5: Create PostController

in this step, now we have created PostController with index methods, in this method we will return pagination data. So let's create a controller:

app/Http/Controllers/PostController.php

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 6:  Vue Configuration

In this step, we have to first add setup of vue js and then install npm, after that we will install vue-resource and vue-infinite-loading, so let's run bellow command in your project.

Install npm:

npm install

Install vue-resource:

npm install vue-resource

Install vue-infinite-loading:

npm install vue-infinite-loading

Step 7: Change on app.js and Components

Here, we will write code on app.js and then we will create vue js components, So let's create both file and put bellow code:

resources/assets/js/app.js

require('./bootstrap');

window.Vue = require('vue');

Vue.use(require('vue-resource'));

Vue.component('example-component', require('./components/ExampleComponent.vue').default);

Vue.component('InfiniteLoading', require('vue-infinite-loading'));

const app = new Vue({
    el: '#app',
});

resources/assets/js/components/ExampleComponent.vue

Step 8:  Change welcome.blade.php file

At last step, we will update our welcome.blade.php file. in this file we will use app.js file and use it, so let's update.

resources/views/welcome.blade.php

resources/views/layouts/app.blade.php

Now you have to run below command for update app.js file:

npm run watch

Read also : Multi Step Form Submit in Laravel with Validation

Now you can check our example and also check demo and download free code. I hope it can help you.