CoderFunda
  • Home
  • About us
    • Contact Us
    • Disclaimer
    • Privacy Policy
    • About us
  • Home
  • Php
  • HTML
  • CSS
  • JavaScript
    • JavaScript
    • Jquery
    • JqueryUI
    • Stock
  • SQL
  • Vue.Js
  • Python
  • Wordpress
  • C++
    • C++
    • C
  • Laravel
    • Laravel
      • Overview
      • Namespaces
      • Middleware
      • Routing
      • Configuration
      • Application Structure
      • Installation
    • Overview
  • DBMS
    • DBMS
      • PL/SQL
      • SQLite
      • MongoDB
      • Cassandra
      • MySQL
      • Oracle
      • CouchDB
      • Neo4j
      • DB2
      • Quiz
    • Overview
  • Entertainment
    • TV Series Update
    • Movie Review
    • Movie Review
  • More
    • Vue. Js
    • Php Question
    • Php Interview Question
    • Laravel Interview Question
    • SQL Interview Question
    • IAS Interview Question
    • PCS Interview Question
    • Technology
    • Other

14 December, 2022

Laravel Vue JS Limitless Parchment Model with Demo

 Programing Coderfunda     December 14, 2022     Vue.js Tutorial, Vuejs     No comments   

 Here, I need to impart to you how to make limitless parchment pagination utilizing vue js and laravel 5.6. we will make bit by bit vuejs boundless stacking information utilizing laravel, so in the event that you are new and, you can do it as well. You need to simply follow not many step for laravel 6, laravel 7, laravel 8 and laravel 9 application.


As we probably are aware, we generally click a connection to paginate and get to the following arrangement of content, then it require investment and burden page without fail. In any case, in the event that you make limitless parchment pagination, it will continuously stack just information and push at base. Thus, in this instructional exercise, you can execute endless parchment pagination utilizing Laravel and Vue.


In this model, I made "posts" table with title and slug. Then, at that point, I made one get strategy that will return information in pagination. Then, at that point, we will compose code for vue.js and part, we are utilizing vue-boundless stacking bundle for limitless stacking. After run this model, you will get format like as underneath review, you can likewise download source code and check demo as well.


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.

Read Also: 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 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:

  • Share This:  
  •  Facebook
  •  Twitter
  •  Google+
  •  Stumble
  •  Digg
Email ThisBlogThis!Share to XShare to Facebook

Related Posts:

  • How to get element by id in vue js? I will teach you how to get element by id in vuejs app. this example will help you to get element by id using refs in vue js app.If you are a us… Read More
  • Vue JS - Open link in new tab If you want to open url in new tab in vue js then i will help to give simple example of open link in new tab in vuejs. we will do using jquery w… Read More
  • How to use setTimeout in Vue JS?I will show you how to use settimeout function in vuejs app. this post will help you to call settimeout using mounted().We can simply use setTimeout()… Read More
  • Laravel Vue Router From Scratch Are you looking for create single page app using vue js in laraval then you know how to create router in vue. If you know about npm package then… Read More
  • How to check object or array empty or not in Vue JS?I will teach you how to check object is empty or not and check array is empty or not in vuejs app. this post will help you to check object or array em… Read More
Newer Post Older Post Home

0 comments:

Post a Comment

Thanks

Meta

Popular Posts

  • Vue3 :style backgroundImage not working with require
    I'm trying to migrate a Vue 2 project to Vue 3. In Vue 2 I used v-bind style as follow: In Vue 3 this doesn't work... I tried a...
  • SQL ORDER BY Keyword
      The SQL ORDER BY Keyword The ORDER BY keyword is used to sort the result-set in ascending or descending order. The ORDER BY keyword sorts ...
  • Enabling authentication in swagger
    I created a asp.net core empty project running on .net6. I am coming across an issue when I am trying to enable authentication in swagger. S...
  • failed to load storage framework cache laravel excel
       User the export file and controller function  ..         libxml_use_internal_errors ( true ); ..Good To Go   public function view () : ...
  • AdminJS not overriding default dashboard with custom React component
    So, I just started with adminjs and have been trying to override the default dashboard with my own custom component. I read the documentatio...

Categories

  • Ajax (26)
  • Bootstrap (30)
  • DBMS (42)
  • HTML (12)
  • HTML5 (45)
  • JavaScript (10)
  • Jquery (34)
  • Jquery UI (2)
  • JqueryUI (32)
  • Laravel (1017)
  • Laravel Tutorials (23)
  • Laravel-Question (6)
  • Magento (9)
  • Magento 2 (95)
  • MariaDB (1)
  • MySql Tutorial (2)
  • PHP-Interview-Questions (3)
  • Php Question (13)
  • Python (36)
  • RDBMS (13)
  • SQL Tutorial (79)
  • Vue.js Tutorial (68)
  • Wordpress (150)
  • Wordpress Theme (3)
  • codeigniter (108)
  • oops (4)
  • php (853)

Social Media Links

  • Follow on Twitter
  • Like on Facebook
  • Subscribe on Youtube
  • Follow on Instagram

Pages

  • Home
  • Contact Us
  • Privacy Policy
  • About us

Blog Archive

  • September (100)
  • August (50)
  • July (56)
  • June (46)
  • May (59)
  • April (50)
  • March (60)
  • February (42)
  • January (53)
  • December (58)
  • November (61)
  • October (39)
  • September (36)
  • August (36)
  • July (34)
  • June (34)
  • May (36)
  • April (29)
  • March (82)
  • February (1)
  • January (8)
  • December (14)
  • November (41)
  • October (13)
  • September (5)
  • August (48)
  • July (9)
  • June (6)
  • May (119)
  • April (259)
  • March (122)
  • February (368)
  • January (33)
  • October (2)
  • July (11)
  • June (29)
  • May (25)
  • April (168)
  • March (93)
  • February (60)
  • January (28)
  • December (195)
  • November (24)
  • October (40)
  • September (55)
  • August (6)
  • July (48)
  • May (2)
  • January (2)
  • July (6)
  • June (6)
  • February (17)
  • January (69)
  • December (122)
  • November (56)
  • October (92)
  • September (76)
  • August (6)

  • Failed to install 'cordova-plugin-firebase': CordovaError: Uh oh - 9/21/2024
  • pyspark XPath Query Returns Lists Omitting Missing Values Instead of Including None - 9/20/2024
  • SQL REPL from within Python/Sqlalchemy/Psychopg2 - 9/20/2024
  • MySql Explain with Tobias Petry - 9/20/2024
  • How to combine information from different devices into one common abstract virtual disk? [closed] - 9/20/2024

Laravel News

  • Efficiently remove expired cache data with Laravel Cache Evict - 6/3/2025
  • Test Job Failures Precisely with Laravel's assertFailedWith Method - 5/31/2025
  • Prism Relay - 6/2/2025
  • Enhance Collection Validation with containsOneItem() Closure Support - 5/31/2025
  • Filament Is Now Running Natively on Mobile - 5/31/2025

Copyright © 2025 CoderFunda | Powered by Blogger
Design by Coderfunda | Blogger Theme by Coderfunda | Distributed By Coderfunda