Pagination in Laravel using Vue Js is the today's topic. Today, I am going to share with you how to make easy Vue js pagination in Laravel 8 application. As you know Pagination help us to load few records every time, that way can not broken web page due to lots of data.
If you are making pagination and do it using Vue js then it more beautiful. Vue js Pagination load only your table data instead of whole page. So Vue pagination is very helpful. In this post i am going to make it. So let's learn how to make it.
if you don't know how to create laravel vue pagination then you are a right place. I will show you step by step to create laravel 8 vue pagination example. To complete this tutorial, you can add this pagination in your every project.
So let's start our today's tutorial laravel vuejs pagination example. Here i will use fresh laravel app. So you can use fresh laravel app.
For doing it we have to follow some instructions. So follow one after another
Step 1 : Installation Laravel
composer create-project --prefer-dist laravel/laravel blog
Step 2: Migration Table
php artisan make:model category -m // here -m for migration
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 todos table.
class CreateCategoriesTable extends Migration
{
public function up()
{
Schema::create('categories', function (Blueprint $table) {
$table->increments('id');
$table->string('name');
$table->timestamps();
});
}
}
and then connect your database and run following command.
php artisan migrate
Step 3: Create New Route
In this is step we need to create routes for todos . So open your routes/web.php file and add following code.
Route::get('categories', 'CategoryController@index');
Step 4 : Create Controller
In this step, here in CategoryController inside index methods, we are going to create this method which will return pagination data. So let’s create controller:
app/Http/Controllers/CategoryController.php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Category;
class CategoryController extends Controller
{
public function index()
{
$data = Category::paginate(10);
return response()->json($data);
}
}
Read Also How to upload image in Laravel
Now we have to setup npm for our vue js . For more about npm visit Vue js
Step 5: Installation vue js :
Run following command
php artisan preset vue
Now install npm
npm install
Now install vue resource
installation vue-resource
Install laravel vue pagination
npm install laravel-vue-pagination
Step 6 : Working on app.js and Components
Go to your resources/assets/js/app.js and paste this following code
resources/assets/js/app.js
require('./bootstrap');
window.Vue = require('vue');
Vue.use(require('vue-resource'));
Vue.component('data-component', require('./components/DataComponent.vue'));
Vue.component('pagination', require('laravel-vue-pagination'));
const app = new Vue({
el: '#app'
});
resources/assets/js/components/DataComponent.vue
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
Now you have to run below command for update app.js file:
npm run dev
I hope it can help you.
#laravel #laravel-8x #vue-js #pagination