Laravel 8 Vue JS Infinite Scroll example; This tutorial will share the complete guide with you on how to create infinite scroll pagination using vue js and laravel 8. And you will learn how to create step by step vuejs infinite page scroll with vue js components in laravel 8 app.
Suppose you want to make a blog application with vue js in laravel. And thousand of posts into your database and want to load all posts on single page when page scroll. So this tutorial will help you to display all posts on infinite page scroll with vue js in laravel.
Laravel 8 Vue JS Infinite Scroll Load More Example Tutorial
Use the following steps to create infinite scroll or load more data on page scroll with vue js + laravel 8 applicatons:
- Step 1: Download Laravel Fresh Setup
- Step 2: Setup Database Credentials
- Step 3: Create Migration and Model File
- Step 4: Generate Dummy Data
- 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
First of all, open your terminal and 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: Setup Database Credentials
In this step, 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: 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
Now execute following command to update app.js file:
npm run watch
