Laravel 8 Inertia JS CRUD with Jetstream & Tailwind CSS

In this tutorial you will learn about the Laravel 8 Inertia JS CRUD with Jetstream & Tailwind CSS and its application with practical example.

In this Laravel 8 Inertia JS CRUD with Jetstream Tailwind CSS tutorial I will show you how to create simple authentication and crud application with using Inertia JS with jetstream and tailwind css In laravel. In this tutorial you will learn what is Laravel 8 Inertia JS CRUD with Jetstream & Tailwind CSS. In this tutorial you will learn to create basic CRUD application with authentication using Inertia JS with jetstream package in laravel.

Laravel 8 Livewire CRUD with Jetstream Tailwind CSS

In this step by step guide, we will be creating a simple crud operation application with validation using JetStream with Inertia JS package in laravel 8. In this example you will learn how to insert, read, update and delete data from database using JetStream with Inertia JS package in laravel 8. Please follow the instruction given below:

Step 1: Install Laravel 8

First of all we need to create a fresh laravel project, download and install Laravel 8 using the below command

Step 2: Create Auth with Jetstream Inertia JS

In this step, we will install Inertia Js and Jetstream Package via the composer dependency manager. Use the following command to install Inertia Js and Jetstream Package.

Now, lets create authentication using Inertia Js. Please use the following command:

Install node js package:

Run package:

Run the migration command to create database table:

Step 3: Create Migration and Model

Now, in this step we will create migration file. Please run the following command:

Migration:

Create Post model using following command:

App/Models/Post.php

Step 4: Create Route

Now, we need to define routes in “routes/web.php” file. Lets open “routes/web.php” file and add the following routes in it.

routes/web.php

Step 5: Create Controller

Now, lets create a controller named PostController using command given below –

app/Http/Controllers/PostController.php

Step 6: Share Inertia Var

In this step we will share ‘message’ and ‘errors’ variable for success message and validation error. Lets share this variables on appservices provider as following:

app/Providers/AppServiceProvider.php

Step 7: Create Vue Page

Now, create posts page vue file to list posts and create and update. so, let’s create it and add bellow code on it.

resources/js/Pages/posts.vue

Run npm watch command

Run Development Server

Now we are ready to run our example so lets start the development server using following artisan command –

Now, open the following URL in browser to see the output –

In this tutorial we have learn about the Laravel 8 Inertia JS CRUD with Jetstream & Tailwind CSS and its application with practical example. I hope you will like this tutorial.