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) {

     * Reverse the migrations.
     * @return void
    public function down()


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:


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.


//Vue js Api Route

		'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

php artisan ui vue

npm install watch


Step 6: Setup app.js

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



window.Vue = require('vue');

//Import v-from
import { Form, HasError, AlertError } from 'vform'
window.Form = Form;
Vue.component(, HasError)
Vue.component(, 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',


Step 7 :  Update Controller

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


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',


        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);


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

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


        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..



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




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


 return  view('test');





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


#laravel #laravel-9x #crud #vue-js