Laravel 12 Livewire CRUD Tutorial with Example Step by Step (2026)

Laravel 12 Livewire CRUD Tutorial: In this tutorial, you will learn how to create a complete CRUD (Create, Read, Update, Delete) application in Laravel 12 using Livewire with validation, search, pagination, and Bootstrap UI.

This Livewire CRUD application allows users to add, edit, update, delete, and search student records without writing JavaScript.

What You Will Build

• Create student record
• Display student list
• Update student details
• Delete student record
• Add validation
• Search records
• Add pagination

Step 1. Install Laravel 12

composer create-project laravel/laravel livewire-crud
cd livewire-crud

Step 2. Configure Database

File: .env

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=livewire_crud
DB_USERNAME=root
DB_PASSWORD=

Step 3. Install Livewire

composer require livewire/livewire

Publish Livewire assets.

php artisan livewire:publish --assets

Step 4. Create Model and Migration

php artisan make:model Student -m

File: database/migrations/create_students_table.php

public function up(): void
{
    Schema::create('students', function (Blueprint $table) {
        $table->id();
        $table->string('name');
        $table->string('email');
        $table->string('phone');
        $table->timestamps();
    });
}

Run migration command.

php artisan migrate

Step 5. Update Model

File: app/Models/Student.php

namespace App\Models;

use Illuminate\Database\Eloquent\Model;

class Student extends Model
{
    protected $fillable = [
        'name',
        'email',
        'phone'
    ];
}

Step 6. Create Livewire Component

php artisan make:livewire StudentCrud

This command creates:

• app/Livewire/StudentCrud.php
• resources/views/livewire/student-crud.blade.php

Step 7. Add CRUD Logic

File: app/Livewire/StudentCrud.php

<?php

namespace App\Livewire;

use Livewire\Component;
use Livewire\WithPagination;
use App\Models\Student;

class StudentCrud extends Component
{
    use WithPagination;

    public $name, $email, $phone, $student_id;
    public $search = '';
    public $isEdit = false;

    protected $rules = [
        'name' => 'required|min:3',
        'email' => 'required|email',
        'phone' => 'required|min:10'
    ];

    public function save()
    {
        $this->validate();

        Student::create([
            'name' => $this->name,
            'email' => $this->email,
            'phone' => $this->phone
        ]);

        session()->flash('message', 'Student Created Successfully');

        $this->resetFields();
    }

    public function edit($id)
    {
        $student = Student::find($id);

        $this->student_id = $student->id;
        $this->name = $student->name;
        $this->email = $student->email;
        $this->phone = $student->phone;

        $this->isEdit = true;
    }

    public function update()
    {
        $this->validate();

        Student::find($this->student_id)->update([
            'name' => $this->name,
            'email' => $this->email,
            'phone' => $this->phone
        ]);

        session()->flash('message', 'Student Updated Successfully');

        $this->resetFields();
    }

    public function delete($id)
    {
        Student::find($id)->delete();

        session()->flash('message', 'Student Deleted Successfully');
    }

    public function resetFields()
    {
        $this->name = '';
        $this->email = '';
        $this->phone = '';
        $this->student_id = '';

        $this->isEdit = false;
    }

    public function render()
    {
        $students = Student::where(
            'name',
            'like',
            '%'.$this->search.'%'
        )->paginate(5);

        return view(
            'livewire.student-crud',
            compact('students')
        );
    }
}

Step 8. Create Blade File

File: resources/views/livewire/student-crud.blade.php

<div class="container mt-5">

    <input type="text"
           wire:model.live="search"
           class="form-control mb-3"
           placeholder="Search Student">

    <form wire:submit.prevent="{{ $isEdit ? 'update' : 'save' }}">

        <input type="text"
               wire:model="name"
               class="form-control mb-2"
               placeholder="Name">

        <input type="email"
               wire:model="email"
               class="form-control mb-2"
               placeholder="Email">

        <input type="text"
               wire:model="phone"
               class="form-control mb-2"
               placeholder="Phone">

        <button class="btn btn-primary">
            {{ $isEdit ? 'Update' : 'Save' }}
        </button>

    </form>

    <table class="table mt-4">
        <thead>
            <tr>
                <th>Name</th>
                <th>Email</th>
                <th>Phone</th>
                <th>Action</th>
            </tr>
        </thead>

        <tbody>
            @foreach($students as $student)
            <tr>
                <td>{{ $student->name }}</td>
                <td>{{ $student->email }}</td>
                <td>{{ $student->phone }}</td>
                <td>
                    <button
                        wire:click="edit({{ $student->id }})"
                        class="btn btn-warning btn-sm">
                        Edit
                    </button>

                    <button
                        wire:click="delete({{ $student->id }})"
                        class="btn btn-danger btn-sm">
                        Delete
                    </button>
                </td>
            </tr>
            @endforeach
        </tbody>
    </table>

    {{ $students->links() }}

</div>

Step 9. Add Route

File: routes/web.php

use App\Livewire\StudentCrud;

Route::get('/', StudentCrud::class);

Step 10. Run Laravel Project

php artisan serve

Open below URL in browser.

http://127.0.0.1:8000

Your Laravel 12 Livewire CRUD application is now ready with create, update, delete, search, validation, and pagination functionality.

How It Works

• User adds student data
• Livewire stores data without page refresh
• User can edit records instantly
• Search filters student data
• Pagination manages records

Real Use Case

• Student management systems
• Employee management systems
• Product CRUD dashboards
• Admin panels

Conclusion

You have successfully created a Livewire CRUD application in Laravel 12 with create, read, update, delete, validation, search, and pagination functionality.

This setup can be extended to build modern admin dashboards and real-time Laravel applications.

Dharmesh Chauhan

(Swapinfoway Founder)

Hello Sir, We are brothers origin from Gujarat India, Fullstack developers working together since 2016. We have lots of skills in web development in different technologies here I mention PHP, Laravel, Javascript, Vuejs, Ajax, API, Payment Gateway Integration, Database, HTML5, CSS3, and Server Administration. So you need our service Please Contact Us

Haresh Chauhan

(Co-Founder)