Laravel 11 + Inertia JS (VUE) CRUD Example: Part 1
Tags: laravel, vue, php, javascript
Published: 2024-06-07 18:33:36

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

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

```php
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
php artisan breeze:install
 
php artisan migrate
npm install
npm run dev
``` 
Please check the image below for more information.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oxsjv7g4frk8hdneugor.png)

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

```php
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
php artisan make:model Event -m
```

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cwc4ktka1yoodiazin2a.png)

Add this code to the migration file.
```php
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.

```php
    /**
    * 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!! :unicorn: :heart: