CRUD Operation Using Livewire in Laravel – Step-by-Step Guide (Easy Way)
Creating dynamic and responsive web applications has become easier with Laravel Livewire. Livewire bridges the gap between front-end interactivity and back-end logic, allowing you to build modern interfaces using Laravel Blade templates without writing a line of JavaScript.
In this blog, we’ll walk through an easy way to implement CRUD (Create, Read, Update, Delete) operations in Laravel using Livewire.
What is Livewire?
Livewire is a full-stack framework for Laravel that makes building dynamic interfaces simple, without leaving the comfort of Laravel. It lets you write reactive components using PHP instead of JavaScript.
Step-by-Step Guide to CRUD with Livewire
Step 1: Install Laravel and Livewire
composer create-project laravel/laravel livewire-crud
cd livewire-crud
composer require livewire/livewire
Add Livewire scripts to your Blade layout (resources/views/layouts/app.blade.php):
blade
<head>
@livewireStyles
</head>
<body>
@yield('content')
@livewireScripts
</body>
Step 2: Create a Model and Migration
We’ll create a simple model for Post:
php artisan make:model Post -m
Edit the migration:
Schema::create('posts', function (Blueprint $table) {
$table->id();
$table->string('title');
$table->text('content');
$table->timestamps();
});
Then run:
Step 3: Create a Livewire Component
php
artisan make:livewire post-crud
This command creates:
app/Http/Livewire/PostCrud.phpresources/views/livewire/post-crud.blade.php
Step 4: Build the Livewire Component Logic
Edit PostCrud.php:
namespace App\Http\Livewire;
use Livewire\Component;
use App\Models\Post;
class PostCrud extends Component
{
public $posts, $title, $content, $post_id;
public $isEdit = false;
public function render()
{
$this->posts = Post::latest()->get();
return view('livewire.post-crud');
}
public function resetFields()
{
$this->title = '';
$this->content = '';
$this->post_id = null;
$this->isEdit = false;
}
public function store()
{
$this->validate([
'title' => 'required',
'content' => 'required',
]);
Post::create([
'title' => $this->title,
'content' => $this->content,
]);
session()->flash('message', 'Post Created Successfully.');
$this->resetFields();
}
public function edit($id)
{
$post = Post::findOrFail($id);
$this->post_id = $post->id;
$this->title = $post->title;
$this->content = $post->content;
$this->isEdit = true;
}
public function update()
{
$this->validate([
'title' => 'required',
'content' => 'required',
]);
$post = Post::find($this->post_id);
$post->update([
'title' => $this->title,
'content' => $this->content,
]);
session()->flash('message', 'Post Updated Successfully.');
$this->resetFields();
}
public function delete($id)
{
Post::find($id)->delete();
session()->flash('message', 'Post Deleted Successfully.');
}
}
Step 5: Create the Blade View
Edit post-crud.blade.php:
<div>
<h2 class="text-2xl mb-4">{{ $isEdit ? 'Edit Post' : 'Create Post' }}</h2>
@if (session()->has('message'))
<div class="bg-green-100 text-green-700 p-2 mb-4">
{{ session('message') }}
</div>
@endif
<form wire:submit.prevent="{{ $isEdit ? 'update' : 'store' }}">
<input type="text" wire:model="title" placeholder="Title" class="border p-2 mb-2 w-full">
<textarea wire:model="content" placeholder="Content" class="border p-2 mb-2 w-full"></textarea>
<button type="submit" class="bg-blue-500 text-white px-4 py-2">
{{ $isEdit ? 'Update' : 'Save' }}
</button>
@if($isEdit)
<button type="button" wire:click="resetFields" class="ml-2 bg-gray-400 text-white px-4 py-2">Cancel</button>
@endif
</form>
<hr class="my-4">
<h3 class="text-xl mb-2">All Posts</h3>
@foreach($posts as $post)
<div class="border p-3 mb-2">
<h4 class="font-bold">{{ $post->title }}</h4>
<p>{{ $post->content }}</p>
<button wire:click="edit({{ $post->id }})" class="bg-yellow-500 text-white px-2 py-1 mr-2">Edit</button>
<button wire:click="delete({{ $post->id }})" class="bg-red-500 text-white px-2 py-1">Delete</button>
</div>
@endforeach
</div>
Step 6: Add Route
In web.php:
use App\Http\Livewire\PostCrud;
Route::get('/posts', PostCrud::class);
Conclusion
With Laravel Livewire, you can build powerful CRUD interfaces quickly without touching JavaScript. This easy example helps you manage your application logic with pure PHP and Blade templates, making development faster and more enjoyable.
If you're looking for a reactive, real-time experience in Laravel, Livewire is your go-to tool!
