Laravel 8 Vue Js Crud Example With Pagination

Hello Devs, In this brand new tutorial i will discuss about vue js crud example step by step with Laravel. I will do it using the version of Laravel 8. I will start this vue laravel crud example from scratch. So that you can understand it better. In this vue laravel crud example i will use v-form to validate our form data.

I will use axios to send http request to the server for creating this vue js Laravel crud example. if you are going to search this vue js crud example with Laravel then i think this tutorial can be best option to learn vue js crud with Laravel. Cause i will teach you step by step that you can learn it easily.

In this laravel 8 vue js crud example I will use simply category model to do crud example. So let's start laravel 6, 7, 8 vue js crud example from step by step.

Step 1: Install Laravel 

In this step we will download fresh Laravel app. Download it by below command.

composer create-project --prefer-dist laravel/laravel blog

Step 2: Create Category table and model

In this step i will use Category model and categories table to create vue js laravel crup single page application. So paste this below code to your categories table.

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreateCategoriesTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('categories', function (Blueprint $table) {
            $table->increments('id');
            $table->string('name');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('categories');
    }
}

After create "categories" table you should create Item model for items, so first create file in this path app/Category.php and put bellow content in user.php file:

app/Category.php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Category extends Model
{
    protected $guarded = [];
}

Now run migration command after setup your database. 

Step 3: Define the API routes

Now, we need to define the API routes inside the routes >> api.php file.

routes/api.php

//Vue js Api Route

Route::apiResources(
	[
		'category' => 'API\CategoryController'
	]
);

Step 4: Create Controller

To quickly generate an API resource controller that does not include the create or edit methods, use the --api switch when executing the make:controller command:

php artisan make:controller API/CategoryController --api

Step 5 : Install Vue dependency 

Now, go inside the project folder and install the frontend dependencies using the following command.

npm install

Now we have to install v-form for client side validation. Read their documentation to learn more how to use it and how v-form works.

npm i axios vform

Now run this command to install laravel vue pagination package

npm install laravel-vue-pagination

Now run command to compile our all javascript file.

npm install watch

Step 6: Setup app.js

Now time to update our app.js file. update it like below

resources/js/app.js

require('./bootstrap');

window.Vue = require('vue');

//Import v-from
import { Form, HasError, AlertError } from 'vform'
window.Form = Form;
Vue.component(HasError.name, HasError)
Vue.component(AlertError.name, AlertError)

//Pagination laravel-vue-pagination
Vue.component('pagination', require('laravel-vue-pagination'));

let Fire = new Vue()
window.Fire = Fire;

Vue.component('category-component', require('./components/CategoryComponent.vue').default);

const app = new Vue({
    el: '#app',
    router
});

Step 7 :  Update Controller

Now we have to update our controller like below to make vue js laravel crud tutorial

App\Http\Controllers\API\CategoryController.php

namespace App\Http\Controllers\API;

use App\Category;
use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use Symfony\Component\HttpFoundation\Response;

class CategoryController extends Controller
{
   
    public function index( Request $request )
    {
        return $request->ajax() ? Category::paginate(5) : abort(404);
    }

    public function store(Request $request)
    {
        $this->validate($request, [
            'name' => 'required|unique:categories',
        ]);

        Category::create($request->all());

        return response()->json(['success' => 'Category created successfully'],Response::HTTP_OK);
    }

    public function show($id)
    {
        //
    }

    public function update(Request $request, $id)
    {
        $this->validate($request, [
            'name' => 'required',
        ]);

        $supplier = Category::findOrFail($id);

        $supplier->update($request->all());

        return response()->json(['success' => 'Category updated successfully'],Response::HTTP_OK);
    }

    public function destroy($id)
    {
        $category = Category::findOrFail($id);

        $category->delete();

        return response()->json(['success' => 'Category deleted successfully'],Response::HTTP_OK);
    }
}

Step 8: Create Blade File

In this step we have to create only one blade file that will manage create, update , delete data in vue js and laravel..

resources/views/master.blade.php

Recommended : Laravel 8.x Vue js CRUD Example With Vue Router

resources/js/components/CategoryComponent.vue

Now we have to show our component in blade file, Do it like below

Route::get('test',function(){

 return  view('test');

});

resources/views/test.blade.php

Now every thing is done. Now you are ready to check it. Hope it will help you.