Laravel 8 Vue Js Infinite Scroll Load More Tutorial

Laravel 8 + Vue JS infinite scroll or load more page data on page scroll; Through this tutorial, i am going to show you how to build or implement load more data on page scroll or infinite scroll pagination using vue js + laravel 8.

Laravel 8 Vue Js Infinite Scroll Load More Tutorial

  • Step 1: Download Laravel Fresh Setup
  • Step 2: Setup Database Credentials
  • Step 3: Create Migration and Model File
  • Step 4: Add Dummy Data into Database
  • 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

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

Visit your laravel application root directory and open .env file. Then add 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

Runthe following command on command prompt to create model and migration file into your laravel applications:

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 execute the following command:

php artisan migrate

This command will create tables into your database.

Step 4: Add Dummy Data into Database

Visit database/factories folder and find PostFactory.php file. After that, open this file 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)
    ];
});

Next open terminal and execute following command to generate dummy data for posts table:

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

Step 5: Add Routes

Add routes; so open web.php file, which is located inside blog/routes folder. And add the following routes into your web.php file:

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

Step 6: Create Controller By Command

Run the following command on terminal to create controller file:

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:

<?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

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

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 - codechief.org</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> 

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
 

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> 

Step 10: Start Development Server

Run following command on terminal to start development server:

npm run watch

Recommended Laravel + Vue js Posts

Be First to Comment

Leave a Reply

Your email address will not be published.