In this tutorial you will learn about the Laravel 7 Vue JS Infinite Scroll Example Tutorial and its application with practical example.
In this Laravel 7 Vue JS Infinite Scroll Example Tutorial I’ll show you how to create Infinite Scroll with Vue Js in laravel. In this tutorial you learn to create or implement Infinite Scroll with Vue Js in laravel application.
- 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 Route
- 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: Run Development Server
Step 1: Download Laravel Fresh Setup
First of all we need to create a fresh laravel project, download and install Laravel using the below command
|
1 |
composer create-project --prefer-dist laravel/laravel blog |
Step 2: Setup Database Credentials
Now, lets create a MySQL database and connect it with laravel application. After creating database we need to set database credential in application’s .env file.
|
1 2 3 4 5 6 |
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
Now, in this step we will create model and migration file for form. Please run the following command:
|
1 |
php artisan make:model Post -fm |
This command will create post model, migration, and factory file into your project. Now, Go to app/database/migrations and find posts migration file. Then open it and update the following code into your posts migration file:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
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'); } } |
Now, run the migration to create database table using following artisan command:
|
1 |
php artisan migrate |
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:
|
1 2 3 4 5 6 7 8 9 |
/** @var \Illuminate\Database\Eloquent\Factory $factory */ use App\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 run following command to generate dummy data for posts table:
|
1 2 3 |
php artisan tinker //then factory(\App\Post::class,200)->create() |
Step 5: Add Route
After this, we need to define routes in “routes/web.php” file. Lets open “routes/web.php” file and add the following routes in it.
routes/web.php
|
1 |
Route::get('posts', 'PostController@index'); |
Step 6: Create Controller By Command
Now, lets create a controller named PostController using command given below –
|
1 |
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:
|
1 2 3 4 5 6 7 8 9 10 |
namespace App\Http\Controllers; use Illuminate\Http\Request; class PostController extends Controller { public function index() { $data = \App\Post::orderBy('id')->paginate(10); return response()->json($data); } } |
Step 7: Configuration Vue JS
Install npm:
|
1 |
npm install |
Install vue-resource:
|
1 |
npm install vue-resource |
Install vue-infinite-loading:
|
1 |
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
|
1 2 3 4 5 6 7 8 |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
<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</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:
|
1 2 3 4 |
@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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!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: Run Development Server
Now we are ready to run our example so lets start the development server using following artisan command –
|
1 |
npm run watch |
