Laravel 9 CRUD Example with Vite Vue and Inertia Js

Hello Artisan,

In this tutorial, I will show you how to create a crud app using vue js with vite in Laravel 9 application. So, in this tutorial, you will learnthe  installation process of vite in Laravel and a complete crud application in Larave 9 with vue js.

I will show you a step by step guide of this vue js Laravel crud tutorial so that you can understand this tutorial. So if you are searching Laravel 9 vue js crud tutorial, then this tutorial is for you.

So let's start the tutorial of Laravel 9 vue js crud application:

Step 1: Install Laravel

This is an optional step. however, if you have not created the laravel app, then you may go ahead and execute the below command:

composer create-project laravel/laravel example-app

Step 2: Create Auth

Now, in this step, we have to use the composer command to install breeze for Laravel default authentication, so let's run the below command and install below library.

composer require laravel/breeze --dev

Now create authentication with the following command.

php artisan breeze:install vue

Now run this command to compile assets:

npm i

//

npm run dev

Read also: Lavavel 9 React CRUD Example with Inertia Js

Step 3: Create Migration

Here, I need to create database migration for the posts table, and also we will create a model for the posts table.

php artisan make:model Post -m

add the following fields to the posts migration file.

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
return new class extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('posts', function (Blueprint $table) {
            $table->id();
            $table->string('title');
            $table->text('body');
            $table->timestamps();
        });
    }
    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('posts');
    }
};

Now update Post model like:

App/Models/Post.ph

namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Post extends Model
{
    use HasFactory;
    /**
     * The attributes that are mass assignable.
     *
     * @var array
     */
    protected $fillable = [
        'title', 'body'
    ];
}

Step 4: Create Route

In the fourth step, we will create routes for react js crud app. so create a resource route here.

routes/web.php

use Illuminate\Foundation\Application;
use Illuminate\Support\Facades\Route;
use Inertia\Inertia;
use App\Http\Controllers\PostController;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
Route::get('/', function () {
    return Inertia::render('Welcome', [
        'canLogin' => Route::has('login'),
        'canRegister' => Route::has('register'),
        'laravelVersion' => Application::VERSION,
        'phpVersion' => PHP_VERSION,
    ]);
});
Route::get('/dashboard', function () {
    return Inertia::render('Dashboard');
})->middleware(['auth', 'verified'])->name('dashboard');

require __DIR__.'/auth.php';

Route::resource('posts', PostController::class);

Step 5: Create Controller

In this step, we will create a PostController file and add the following code to it.

app/Http/Controllers/PostController.php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Inertia\Inertia;
use App\Models\Post;
use Illuminate\Support\Facades\Validator;

class PostController extends Controller
{
    /**
     * Show the form for creating a new resource.
     *
     * @return Response
     */
    public function index()
    {
        $posts = Post::all();
        return Inertia::render('Posts/Index', ['posts' => $posts]);
    }

    /**
     * Write code on Method
     *
     * @return response()
     */
    public function create()
    {
        return Inertia::render('Posts/Create');
    }

    /**
     * Show the form for creating a new resource.
     *
     * @return Response
     */
    public function store(Request $request)
    {
        Validator::make($request->all(), [
            'title' => ['required'],
            'body' => ['required'],
        ])->validate();

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

        return redirect()->route('posts.index');
    }

    /**
     * Write code on Method
     *
     * @return response()
     */
    public function edit(Post $post)
    {
        return Inertia::render('Posts/Edit', [
            'post' => $post
        ]);
    }

    /**
     * Show the form for creating a new resource.
     *
     * @return Response
     */
    public function update($id, Request $request)
    {
        Validator::make($request->all(), [
            'title' => ['required'],
            'body' => ['required'],
        ])->validate();

        Post::find($id)->update($request->all());
        return redirect()->route('posts.index');
    }

    /**
     * Show the form for creating a new resource.
     *
     * @return Response
     */
    public function destroy($id)
    {
        Post::find($id)->delete();
        return redirect()->route('posts.index');
    }
}

Step 6: Create React Pages

In this last step, we are creating a Vue Js Pages — Index.vue, Create.vue and Edit.vue. Create a new folder Posts inside resources/js/Pages and create the below pages inside the Posts folder.

resources/js/Pages/Posts/Index.vue

resources/js/Pages/Posts/Create.vue

resources/js/Pages/Posts/Edit.vue

Create a new file Textaarea.vue inside resources/js/Components

resources/js/Components/Textarea.vue

Add a Post Navigation in Authenticated.vue inside resources/js/Layouts folder.

All are set to go. Run the below command to compile all javascript files:

npm run watch

then start the development server:

php artisan serve

Now visit:

Read also: Laravel 8.x Vue js Tutorial with Twitter Application

Hope it can help you.