Laravel Livewire là gì? Cách dùng Livewire 4 qua ví dụ

Laravel Livewire là thư viện full stack cho Laravel giúp xây dựng giao diện động (form kiểm tra dữ liệu tức thì, bộ lọc, phân trang không tải lại trang) bằng PHP và Blade, không cần tự viết JavaScript cho từng tương tác. Bản hiện hành là Livewire 4, yêu cầu Laravel 10 trở lên và PHP 8.1 trở lên; component mặc định là một file duy nhất chứa cả PHP và giao diện.

Bài viết giải thích Livewire hoạt động ra sao, cách cài đặt, ví dụ component thực tế theo tài liệu Livewire 4.x (truy cập 01/10/2026), khi nào nên và không nên dùng.

Livewire hoạt động như thế nào?

Component Livewire được render trên máy chủ thành HTML như một view Blade. Khi người dùng nhấn nút có wire:click hoặc gửi form, phần JavaScript nhỏ của Livewire gửi request lên máy chủ kèm trạng thái component. Máy chủ gọi phương thức PHP tương ứng, render lại component, và Livewire chỉ cập nhật phần HTML thay đổi trên trang.

Vì logic nằm ở PHP, bạn dùng được ngay Eloquent, validation, phân quyền của Laravel. Đổi lại, mỗi tương tác cần gọi máy chủ, nên các hiệu ứng thuần giao diện (mở menu, ẩn hiện khối) nên làm bằng Alpine.js, thư viện JavaScript nhẹ đi kèm Livewire.

Cài đặt Livewire

Trong dự án Laravel có sẵn, cài bằng Composer:

composer require livewire/livewire

Layout cần có @livewireStyles trong thẻ <head> và @livewireScripts trước thẻ đóng </body> để nạp CSS và JavaScript của Livewire. Nếu tạo dự án mới, bạn có thể chọn starter kit Livewire ngay khi chạy laravel new (xem hướng dẫn cài đặt Laravel); starter kit này dùng Livewire 4, Tailwind và Flux UI.

Tạo component Livewire đầu tiên

Lệnh make:livewire tạo component dạng một file (single-file component) trong resources/views/components, tên file có biểu tượng ⚡ ở đầu:

php artisan make:livewire post.create
# Tạo: resources/views/components/post/⚡create.blade.php

Trong file này, phần PHP là một class ẩn danh kế thừa Livewire\Component, phần dưới là giao diện. Ví dụ form tạo bài viết có kiểm tra dữ liệu:

<?php

use App\Models\Post;
use Livewire\Attributes\Validate;
use Livewire\Component;

new class extends Component {
    #[Validate('required|min:3')]
    public $title = '';

    #[Validate('required')]
    public $content = '';

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

        Post::create($validated);

        $this->reset(['title', 'content']);
    }
};
?>

<form wire:submit="save">
    <input type="text" wire:model="title">
    <div>@error('title') {{ $message }} @enderror</div>

    <textarea wire:model="content"></textarea>
    <div>@error('content') {{ $message }} @enderror</div>

    <button type="submit">Lưu bài viết</button>
</form>

Nhúng component vào bất kỳ view Blade nào bằng thẻ:

<livewire:post.create />

Ngoài dạng một file (mặc định), Livewire 4 còn hỗ trợ dạng nhiều file (cờ --mfc) cho component lớn và dạng class quen thuộc từ Livewire 2, 3 (cờ --class).

Các directive Livewire hay dùng

Ví dụ ô tìm kiếm lọc danh sách khi gõ:

<input type="search" wire:model.live="search" placeholder="Tìm bài viết...">

Lưu ý từ Livewire 3: wire:model không còn cập nhật tức thì như ở Livewire 2. Nếu nâng cấp dự án cũ mà ô nhập "không phản hồi", hãy kiểm tra có cần thêm .live hay không.

Khi nào nên dùng Livewire?

Livewire không làm thay các tính năng của Laravel như xác thực hay định tuyến; nó là lớp giao diện dùng lại các tính năng đó. Phần xác thực, phân quyền xem thêm bài authentication và authorization trong Laravel; mọi request của Livewire vẫn được bảo vệ chống CSRF như form thông thường (CSRF trong Laravel).

Kinh nghiệm từ Hozitech

Website Hozitech chạy trên Laravel và dùng Blade cho giao diện. Với kiểu dự án này, Livewire hợp nhất ở các khối tương tác cục bộ như form liên hệ có kiểm tra lỗi tức thì hay bộ lọc danh sách, vì không phải dựng thêm API và frontend riêng. Một lưu ý thực tế: thuộc tính public của component được gửi qua lại giữa trình duyệt và máy chủ, nên không đặt dữ liệu nhạy cảm vào đó và luôn kiểm tra quyền trong phương thức xử lý. Nếu mới bắt đầu, hãy đọc Laravel là gì trước khi học Livewire.