Laravel Vue JS Infinite Scroll Example with Demo

Laravel Vue JS Infinite Scroll Example with Demo

In this post we will give you information about Laravel Vue JS Infinite Scroll Example with Demo. Hear we will give you detail about Laravel Vue JS Infinite Scroll Example with DemoAnd how to use it also give you demo for it if it is necessary.

In this post, i want to share with you how to create infinite scroll pagination using vue js and laravel 5.6. we will create step by step vuejs infinite loading data using laravel, so if you are new and then you can do it too. You have to just follow few step.

As we know, we always click a link to paginate and get to the next set of content, then it take time and load page every time. But if you create infinite scroll pagination then it will always load only data and push at bottom. So, in this tutorial, you can implement infinite scroll pagination using Laravel and Vue.

In this example, i created “posts” table with title and slug. Then i created one get method that will return data in pagination. Then we will write code for vue.js and component, we are using vue-infinite-loading package for infinite loading. After run this example, you will get layout like as below preview, you can also download source code and check demo too.

Preview:

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 IlluminateSupportFacadesSchema;

use IlluminateDatabaseSchemaBlueprint;

use IlluminateDatabaseMigrationsMigration;


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 IlluminateDatabaseEloquentModel;


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.

Also see:Laravel 5 and Vue JS CRUD with Pagination example and demo from scratch

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 AppHttpControllers;

use IlluminateHttpRequest;

use AppPost;

class PostController extends Controller

{

/**

* success response method.

*

* @return IlluminateHttpResponse

*/

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 style="margin-top:50px;">

<div >

<div >

<div >

<div ><strong> Laravel Vue JS Infinite Scroll - ItSolutionStuff.com</strong></div>

<div >

<div>

<p v-for="item in list">

<a v-bind:href="'https://onlinecode.org/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:

Also see:Laravel Vue JS Pagination Example with Demo

npm run dev

Now you can check our example and also check demo and download free code.

I hope it can help you…

Hope this code and post will helped you for implement Laravel Vue JS Infinite Scroll Example with Demo. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs

For More Info See :: laravel And github

Leave a Comment

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

4  +  4  =  

We're accepting well-written guest posts and this is a great opportunity to collaborate : Contact US