Hello devs,
In this laravel 7 vue pagination example, I will show you step by step how to create laravel 7 pagination with vue js. There is a package laravel-vue-pagination
and using this laravel-vue-pagination package, we will create pagination with laravel in vue js.
If you don't know how to create laravel vue pagination, then this example is for you. I will show you step by step so that you can understand better laravel vue pagination example. So let's see the example code of laravel vue pagination example.
Step 1 : Installation Laravel
For doing it we have to follow some instructions. So follow one after another
composer create-project --prefer-dist laravel/laravel blog
Step 2: Migration Table
Now run the below command to create a category model.
php artisan make:model category -m // here -m for migration
After this command, you will find one file in the following path database/migrations and you have to put the below code in your migration file to create a categories 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 the following command.
php artisan migrate
Step 3: Create New Route
In this step, we need to create routes for categories. So open your routes/web.php file and add the following code.
routes/web.php
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 a 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
Step 5: Installation vue js :
Now we have to set up npm for our vue js. Run the following command
php artisan preset vue
Now install npm
npm install
Now install vue resource
installation vue-resource
Install laravel vue pagination package by the following command:
npm install laravel-vue-pagination
Step 6 : Working on app.js and Components
Go to your resources/assets/js/app.js and paste the 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
In the last step, we will update our welcome.blade.php file. in this file, we will use the app.js file and use it, so let's update.
resources/views/welcome.blade.php
Now you have to run the below command to update app.js file:
npm run dev
I hope it can help you.
#laravel #vue-js