Laravel 8 Vue JS Infinite Scroll Load More Tutorial

In this tutorial you will learn about the Laravel 8 Vue JS Infinite Scroll Load More Tutorial and its application with practical example.

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

Table Of Contents−

Laravel 8 Vue JS Infinite Scroll Load More Tutorial

In this step by step tutorial I will demonstrate to create infinite scroll or load more pagination on page scroll with vue js and laravel 8 applicatons:

Step 1: Download Laravel Fresh Setup
Step 2: Setup Database Credentials

Step 3: Create Migration and Model File
Step 4: Generate Dummy Data
Step 5: Add Routes

Step 6: Create Controller By Command
Step 7: Configuration Vue JS
Step 8: Update app.js And Default Components

Step 9: Add Vue Components on welcome.blade.php file
Step 10: Start Development Server

Step 1: Download Laravel Fresh Setup

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

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

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

Step 2: Setup Database Credentials

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=here your database name here
DB_USERNAME=here database username here
DB_PASSWORD=here database password here

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

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

php artisan make:model Post -fm

1	php artisan make:model Post -fm

The above command will create post model, migration, and factory file into your project. Go to app/database/migrations and find posts migration file. Then open it and put the following code into 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');
    }
}

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');

}

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

php artisan migrate

1	php artisan migrate

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\Models\Post;
use Faker\Generator as Faker;
$factory->define(Post::class, function (Faker $faker) {
    return [
        'title' => $faker->word,
        'slug' => strtolower($faker->word)
    ];
});

/** @var \Illuminate\Database\Eloquent\Factory $factory */

use App\Models\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()

php artisan tinker

//then

factory(\App\Post::class,200)->create()

Step 5: Add Routes

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

use App\Http\Controllers\PostController;
 
Route::get('posts', [PostController::class, 'index']);

use App\Http\Controllers\PostController;

Route::get('posts', [PostController::class, 'index']);

Step 6: Create Controller By Command

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

php artisan make:controller PostController

1	php artisan make:controller PostController

The above command will create PostController inside app/Http/Controllers/ folder. Now, open your PostController and update the following methods into your PostController File:

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

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class PostController extends Controller

{

public function index()

{

$data = \App\Models\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 execute the following commands one by one:

Install npm:

npm install

1	npm install

Install vue-resource:

npm install vue-resource

1	npm install vue-resource

Install vue-infinite-loading:

npm install vue-infinite-loading

1	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

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',
});

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

<template>
    <div class="container" style="margin-top:50px;">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header"><strong> Laravel Vue JS Infinite Scroll</strong></div>
  
                    <div class="card-body">
                        <div>
                          <p v-for="item in list" :key="item.id">
                            <a v-bind:href="'http://127.0.0.1:8000/post/'+item.slug" target="_blank">{{item.title}}</a>
                          </p>
                          <infinite-loading @distance="1" @infinite="infiniteHandler"></infinite-loading>
  
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
  
<script>
    export default {
        
        data() {
            return {
              list: [],
              page: 1,
            };
          },
          methods: {
            infiniteHandler($state) {
      
                this.$http.get('/posts?page='+this.page)
                    .then(response => {
                        return response.json();
                         
                    }).then(data => {
                        $.each(data.data, (key, value)=> {
                                this.list.push(value);
                        });
                    $state.loaded();
                    });
  
                this.page = this.page + 1;
            },
          },
    }
</script>

<div class="card-header"><strong> Laravel Vue JS Infinite Scroll</strong></div>

<div>

<a v-bind:href="'http://127.0.0.1:8000/post/'+item.slug" target="_blank">{{item.title}}</a>

</p>

<infinite-loading @distance="1" @infinite="infiniteHandler"></infinite-loading>

</div>

</template>

export default {

data() {

return {

list: [],

page: 1,

};

methods: {

infiniteHandler($state) {

this.$http.get('/posts?page='+this.page)

.then(response => {

return response.json();

}).then(data => {

$.each(data.data, (key, value)=> {

this.list.push(value);

});

$state.loaded();

});

this.page = this.page + 1;

}

</script>

Step 9: Add Vue Components on welcome.blade.php file

Go to resources/views and find welcome.blade.php file inside this folder. Then update the following code into your welcome.blade.php file:

@extends('layouts.app')
@section('content')
  <example-component></example-component>
@endsection

@extends('layouts.app')

@section('content')

<example-component></example-component>

@endsection

And also update the following code into app.blade.php file, which is located on resources/views/layouts/ folder.

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>{{ config('app.name', 'Laravel') }}</title>
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
     
</head>
<body>
    <div id="app">
      
        <main class="py-4">
            @yield('content')
        </main>
    </div>
</body>
 <script src="{{ asset('js/app.js') }}" defer></script>
</html>

<!doctype html>

<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>

<title>{{ config('app.name', 'Laravel') }}</title>

</head>

<body>

@yield('content')

</main>

</div>

</body>

</html>

Step 10: Start Development Server

npm run watch

1	npm run watch

AngularJS

CodeIgniter

Laravel

Node Js

Wordpress

More Blog

Learn

ABOUT PAGES

Laravel 8 Vue JS Infinite Scroll Load More Tutorial