How to Create Infinite Scroll Load More in Laravel 10 Vue js

How to Create Infinite Scroll Load More in Laravel 10 Vue js

It is very easy to create page load more scroll in Laravel Vue Jas web application. Because of this you can use the vue-infinite-loading package. So, In this tutorial, you will learn how to create an infinite load more on page scroll using laravel 10 vue js apps.

Infinite scroll with “Load More” functionality is a common feature in web applications that allows users to load more content as they scroll down a page, eliminating the need for traditional pagination. Laravel, a popular PHP framework, can be combined with Vue.js, a JavaScript framework, to create such a feature.

Laravel 10 Vue js Create Infinite Scroll Load More Tutorial

By following these steps, you can create an infinite scroll with “Load More” functionality in Laravel 10 and Vue.js:

  • Step 1: Set up Laravel 10 Application
  • Step 2: Configure Database to Laravel App
  • Step 3: Create Migration and Model File
  • Step 4: Generate Dummy Data
  • Step 5: Add Routes
  • Step 6: Create Controller By Command
  • Step 7: Install and Configure 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: Set up Laravel 10 Application

First of all, open your terminal or cmd(command prompt).

Then execute the following command into it to download laravel fresh setup in your server:

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

Step 2: Configure Database to Laravel App

Once you have installed laravel web app on your server. Then you need to configure database with laravel app.

So, 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, 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

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

In this step, 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

Again open a command prompt, to execute 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:

<?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: Install and Configure Vue.js

Now, you need to install and configure vue js in laravel web app. So, open cmd or terminal and execute the following commands into it:

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

Now execute following command to update app.js file:

npm run watch

Recommended Laravel Vue js Posts

AuthorAdmin

My name is Devendra Dode. I am a full-stack developer, entrepreneur, and owner of Tutsmake.com. I like writing tutorials and tips that can help other developers. I share tutorials of PHP, Python, Javascript, JQuery, Laravel, Livewire, Codeigniter, Node JS, Express JS, Vue JS, Angular JS, React Js, MySQL, MongoDB, REST APIs, Windows, Xampp, Linux, Ubuntu, Amazon AWS, Composer, SEO, WordPress, SSL and Bootstrap from a starting stage. As well as demo example.

Leave a Reply

Your email address will not be published. Required fields are marked *