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