Laravel 9 Vue Js CRUD Example With V-Form And Sweet Alert

Hello Artisan,

In this Laravel vue js crud example, I will show you a complete single page application using vue js in Laravel 9. From this laravel 9 vue js crud example, You will learn how to create a crud project in Laravel 9 using vue js.

In this laravel vue js full project tutorial, I will create a simple crud application using vue js. I will use sweet alert for success message after form submission and I will use v-form for form validation. You know that we can use vue js in Laravel for single page application (spa) or we can use vue js as component wise in laravel blade. 

You will learn step by step how to install vue js in Laravel 9 and how to create a crud application in laravel 9 with vue js and sweet alert. I will use modal to create and update data to create this laravel crud operation with vue js.

So let's start laravel 9 vue js crud example step by step tutorial for beginner:

Step 1: Install Laravel 

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

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

Step 2: Create Category table and model

In this step, I will use the 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 creating categories table you should create Item model for items, so first create a 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 the migration command after set up 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 about 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 the command to compile our all javascript files.

composer require laravel/ui

//then
php artisan ui vue

//then
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 everything is done. Now you are ready to check it. Hope it will help you.