DEV Community

Cover image for Laravel 11 + Inertia JS (VUE) CRUD Example: Part 1
Snehal Rajeev Moon
Snehal Rajeev Moon

Posted on

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

#laravel #php #vue #javascript

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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(); });
Enter fullscreen mode Exit fullscreen mode

Add this code in Event Model file.

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

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!! 🦄 ❤️

Top comments (0)