Laravel 9 Livewire CRUD using Jetstream & Tailwind CSS

https://www.itsolutionstuff.com/post/laravel-9-livewire-crud-using-jetstream-tailwind-cssexample.html

Hello Dev,

Now, let's see an article of laravel 9 livewire crud example. you will learn laravel 9 livewire crud with jetstream & tailwind css. I explained simply step by step laravel 9 livewire crud with a modal tailwind. I explained simply step by step laravel 9 jetstream livewire crud application example. Let's get started with insert update delete with laravel 9 livewire.

Laravel 9 jetstreams are designed by Tailwind CSS and they provide auth using livewire and Inertia. I will show you how to create a module with livewire on default jetstream auth in laravel 9.

In this example, we will install jetstream and create auth scaffolding using livewire, Then we will create a posts table with title and body fields. we will create a simple crud operation with that. so let's follow step by step and create a crud application with livewire. you can see the preview:

Preview:

List View:

Create View:

Update View:

Step 1: Install Laravel 9

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

Step 2: Create Auth with Jetstream Livewire

Now, in this step, we need to use composer command to install jetstream, so let's run bellow command and install bellow library.

now, we need to create authentication using the bellow command. you can create basic login, register, and email verification. if you want to create team management then you have to pass the addition parameter. you can see bellow commands:

Now, let's node js package:

let's run package:

now, we need to run migration command to create database table:

Read Also: Laravel 9 CRUD Application Tutorial Example

Step 3: Create Migration and Model

Here, we need create database migration for posts table and also we will create model for posts table.

Migration:

now we will create Post model by using following command:

App/Models/Post.php

Step 4: Create Post Component

Now here we will create livewire component using their command. so run bellow command to create post crud application component.

Now they created fies on both path:

Step 5: Update Component File

Here, we will write render(), create(), openModal(), closeModal(), resetInputFields(), store(), edit() and delete() method for our crud app.

So, let, update following file.

app/Http/Livewire/Posts.php

Step 6: Update Blade Files

Here, we will update following list of files for our listing page, create page.

So, let's update all the files as bellow:

resources/views/livewire/posts.blade.php

resources/views/livewire/create.blade.php

You also need to import tailwind css in your layouts.php, so let's update file:

resources/views/layouts/app.blade.php

Step 7: Add Route

In third step, we will create routes for multiple file upload. so create two route with GET and POST route example.

routes/web.php

Run Laravel App:

All the required steps have been done, now you have to type the given below command and hit enter to run the Laravel app:

Now, Go to your web browser, type the given URL and view the app output:

Read Also: Laravel 9 Queues: How to Use Queue in Laravel 9?

now it's works...

I hope it can help you...

PreviousLaravel 9 Autocomplete Search from Database ExampleNextLaravel 9 Model Observers Example Tutorial

Last updated

Was this helpful?