Example of an infinite scroll in Laravel and Vue JS
I'll show you how to make infinite scroll pagination with vue js and Laravel 5.6 in this post. If you are a beginner, you may still develop step-by-step vuejs infinite loading data using laravel. For the Laravel 6, Laravel 7, Laravel 8, and Laravel 9 apps, you simply need to follow a few simple steps.
As is common knowledge, clicking a link to paginate and view the next piece of material always takes time and loads a new page. On the other hand, if you design endless scroll pagination, then it will always load only data and push to the bottom. Therefore, using Laravel and Vue, you may construct infinite scroll pagination in this tutorial.
In this illustration, I made a table called "posts" with a title and slug. Then I developed a get method that will paginate the data it returns. Then, using the vue-infinite-loading package, we will develop the code for the vue.js component. You can download the source code and visit the demo after running this example to see how the layout will look.
Step 1 : Install Laravel 5.6 App
In the first step, we require to get fresh Laravel 5.6 application using bellow command, So open your terminal OR command prompt and run bellow command:
composer create-project --prefer-dist laravel/laravel blog
Step 2: Create Post Table and Model
in second step, we have to create migration for "posts" table using Laravel 5.6 php artisan command, so first fire bellow command:
php artisan make:migration create_posts_table
After this command you will find one file in following path database/migrations and you have to put bellow code in your migration file for create posts table.
<?php
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->increments('id');
$table->string('title');
$table->string('slug');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('posts');
}
}
After create migration we need to run above migration by following command:
php artisan migrate
After create "posts" table you should create Post model for posts, so first create file in this path app/Post.php and put bellow content in Post.php file:
app/Post.php
<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
class Post extends Model
{
/**
* The attributes that are mass assignable.
*
* @var array
*/
protected $fillable = [
'slug', 'title'
];
}
After create migration and model, Make sure you have to add some dummy records in your "posts" table.
Step 3: Add Route
In this step, we will create one route for getting pagination data. So, let's add new route on that file.
routes/web.php
Route::get('posts', 'PostController@index');
Step 4: Create PostController
in this step, now we have create PostController with index methods, in this method we will return pagination data. So let's create controller:
app/Http/Controllers/PostController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Post;
class PostController extends Controller
{
/**
* success response method.
*
* @return \Illuminate\Http\Response
*/
public function index()
{
$data = Post::orderBy('id')->paginate(10);
return response()->json($data);
}
}
Step 5: NPM Configuration
In this step, we have to first add setup of vue js and then install npm, after that we will install vue-resource and vue-infinite-loading, so let's run bellow command in your project.
Install vue:
php artisan preset vue
Install npm:
npm install
Install vue-resource:
npm install vue-resource
Install vue-infinite-loading:
npm install vue-infinite-loading
Step 6: Write on app.js and Components
Here, we will write code on app.js and then we will create vue js components, So let's create both file and put bellow code:
resources/assets/js/app.js
require('./bootstrap');
window.Vue = require('vue');
Vue.use(require('vue-resource'));
Vue.component('example-component', require('./components/ExampleComponent.vue'));
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 - ItSolutionStuff.com</strong></div>
<div class="card-body">
<div>
<p v-for="item in list">
<a v-bind:href="'https://itsolutionstuff.com/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 {
mounted() {
console.log('Component mounted.')
},
data() {
return {
list: [],
page: 1,
};
},
methods: {
infiniteHandler($state) {
let vm = this;
this.$http.get('/posts?page='+this.page)
.then(response => {
return response.json();
}).then(data => {
$.each(data.data, function(key, value) {
vm.list.push(value);
});
$state.loaded();
});
this.page = this.page + 1;
},
},
}
</script>
Step 7: Update welcome.blade.php
At last step, we will update our welcome.blade.php file. in this file we will use app.js file and use it, so let's update.
resources/views/welcome.blade.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="csrf-token" content="{{ csrf_token() }}">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel 5.6 Vue JS Infinite Scroll Pagination - ItSolutionStuff.com </title>
<link href="{{asset('css/app.css')}}" rel="stylesheet" type="text/css">
</head>
<body>
<div id="app">
<example-component></example-component>
</div>
<script src="{{asset('js/app.js')}}" ></script>
</body>
</html>
Now you have to run below command for update app.js file:
npm run dev
