Laravel 11 + Inertia JS (VUE) CRUD Example: Part 1

Hello Artisan,

In today's blog post, we'll see how to use laravel 11 and Inertia js to build Single Page Application (SPA) with a CRUD operation by creating a simple Event management application.
Using this combination we can build modern single-page applications without leaving the comfort of our favorite backend framework.

What is Inertia JS?

Inertia.js is a modern JavaScript-driven application using classic server-side routing and controllers. It acts as a bridge between server-side frameworks like Laravel and client-side frameworks like Vue.js or React. It is also called a modern monolith. It means you can use your server-side code to handle routing, validation, and authentication while building rich, modern interfaces with the client-side framework of your choice.

This blog is divided into two parts:

1. Installation and Stepup of laravel project
2. CRUD Operation

Prerequisites: Before we start, make sure you have the following installed:

• PHP
• Composer
• Node.js and npm
• A basic understanding of Laravel and Vue.js

Step 1: Set up the Laravel Project

composer create-project laravel/laravel event-management-app

cd event-management-app

Step 2: Frontend Scaffolding using Breeze
Laravel Breeze comes with authentication features that provide a simple implementation of login, registration, password reset, email verification, and password confirmation features. To use this feature we have to install the package using Composer.

composer require laravel/breeze --dev

After the package is installed we have to run the command breeze:install which publishes the authentication files. During this installation process, it asks you to select the frontend stack and testing framework.

php artisan breeze:install

php artisan migrate
npm install
npm run dev

Please check the image below for more information.

Step 3: Add your database details in .env file.

DB_DATABASE=your_database_name
DB_USERNAME=your_database_user
DB_PASSWORD=your_database_password

Step 4: Create a migration and model for the events table.
This migration file is used to store the information about the event, which includes the name of the event, date, time, and location.

php artisan make:model Event -m

Here -m flag creates a migration file along with the Event model. Check the screenshot for the result.

Add this code to the migration file.

Schema::create('events', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->dateTime('from_datetime');
            $table->dateTime('to_datetime');
            $table->string('location');
            $table->timestamps();
        });

Add this code in Event Model file.

    /**
    * The attributes that are mass assignable.
    *
    * @var array
    */
    protected $fillable = [
        'name',
        'from_datetime',
        'to_datetime',
        'location',
    ];

Now run php artisan migrate command to run the migrations.

In this blog, we have seen the installation process and the basic setup of the laravel project using Inertia. In the coming blog post, we will see the CRUD operation.

Happy Reading!! 🦄 ❤️