Panduan Lengkap Instalasi dan Penggunaan Livewire 3 pada Laravel 11

Livewire 3 menjadi standar dewan komponen interaktif di Laravel 11. Tutorial ini menjelaskan instalasi, konfigurasi, contoh kode, serta best practice terkini di tahun 2026.

1. Prasyarat

• Laravel 11 terinstal (PHP >= 8.3)
• Node.js 20+ dan npm
• Database MySQL/PostgreSQL

2. Instalasi Laravel 11 (jika belum ada)

composer create-project laravel/laravel blog "11.*" --prefer-dist
cd blog

3. Instalasi Livewire 3

composer require livewire/livewire:^3.0

Livewire 3 secara otomatis mendaftarkan service provider.

4. Setup Frontend dengan Vite

# Install dependensi UI default (Breeze) – opsional
composer require laravel/breeze --dev
php artisan breeze:install vue

# Install npm dependencies
npm install
npm run dev

Vite sudah terkonfigurasi untuk memuat @livewire/livewire melalui resources/js/app.js:

import { Livewire, Alpine } from 'livewire';
Livewire.start();
Alpine.start();

5. Membuat Komponen Livewire Pertama

php artisan make:livewire Counter

Perintah di atas menghasilkan:

• app/Http/Livewire/Counter.php
• resources/views/livewire/counter.blade.php

5.1. Kode PHP (Counter.php)

namespace App\Http\Livewire;

use Livewire\Component;

class Counter extends Component
{
    public int $count = 0;

    public function increment()
    {
        $this->count++;
    }

    public function render()
    {
        return view('livewire.counter');
    }
}

5.2. Blade View (counter.blade.php)

<div class="p-4 bg-gray-100 rounded">
    <h1 class="text-xl font-bold">Count: {{ $count }}</h1>
    <button wire:click="increment" class="mt-2 px-4 py-2 bg-blue-500 text-white rounded">
        Increment
    </button>
</div>

5.3. Menyisipkan Komponen di Halaman

<!-- resources/views/welcome.blade.php -->
<x-app-layout>
    <div class="container mx-auto mt-10">
        @livewire('counter')
    </div>
</x-app-layout>

6. Konfigurasi Tambahan

• CSRF & X‑Headers: Livewire sudah men‑inject token, pastikan VerifyCsrfToken tidak men‑exclude route Livewire.
• Debug Mode: Pada .env set APP_DEBUG=true untuk melihat error Livewire di console.
• Polling & Debounce: Tambahkan wire:model.debounce.500ms="search" pada input bila diperlukan.

7. Best Practice di 2026

• Typed Properties: Gunakan tipe properti PHP 8.3 (ex: public string $name = '';) untuk manfaat static analysis.
• Lazy Loading: Pakai wire:loading dan wire:init untuk mengurangi beban render awal.
• Component Isolation: Simpan logika bisnis di Service Class, bukan langsung di komponen Livewire.
• Testing: Gunakan LivewireTestingTestableLivewire untuk unit test; contoh Livewire::test(Counter::class)->call('increment')->assertSet('count', 1);
• Cache Blade Views: Pada produksi, jalankan php artisan view:cache agar Blade Livewire lebih cepat.

8. Deploy ke Production

# Build assets
npm run build

# Optimasi Laravel
php artisan config:cache
php artisan route:cache
php artisan view:cache
php artisan event:cache

# Migrate database
php artisan migrate --force

Pastikan server mendukung PHP 8.3, dan queue worker dijalankan bila menggunakan Livewire::sendBrowserEvents untuk notifikasi real‑time.

Livewire 3 pada Laravel 11 menyediakan cara tercepat untuk membangun UI interaktif tanpa menulis JavaScript berlebih. Dengan mengikuti langkah‑langkah di atas, Anda dapat menginstal, mengkonfigurasi, dan menulis komponen yang teroptimasi serta siap produksi pada tahun 2026.

---

Tutorial step-by-step instalasi dan penggunaan Livewire 3 di Laravel 11 tahun 2026, lengkap dengan contoh kode, konfigurasi Vite, dan best practice modern.

Laravel,PHP Framework,Web Development

#Laravel #LaravelIndonesia #PHP #WebDev #Backend