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