How to Make Load More Infinite Scroll in Laravel 8 Vue JS

Load more infinite scroll in laravel 8 with vue js; In this tutorial, i am going to show you on how to build infinite scroll pagination using vue js and laravel 8. And as well as you will understand step by step how to make step by step vuejs infinite page scroll with vue js components in laravel 8 app.

Infinite scrolling is a procedure that permits users to scroll through a large chunk of content with no finishing-line insight. This method utterly keeps refreshing a page when you scroll down it.

Laravel 8 Vue JS Load More Infinite Scroll Example

  • Step 1 – Install Laravel 8
  • Step 2 – Connect App to Database
  • Step 3 – Make Migration and Model File
  • Step 4 – Generate Dummy Data
  • Step 5 – Make Routes
  • Step 6 – Make 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 – Install Laravel 8

Execute 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: Connect App to Database

Visit 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 – Make Migration and Model File

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

php artisan migrate

The above command will create tables into your app database.

Step 4 – Generate Dummy Data

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

Execute following command to generate dummy data for posts table:

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

Step 5 – Make Routes

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 – Make Controller By Command

Execute the following command on terminal to create controller:

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

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>

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

Execute following command to update app.js file:

npm run watch

Recommended Laravel Vue js Posts

Be First to Comment

Leave a Reply

Your email address will not be published.