Belajar Livewire - Instalasi & Komponen Pertama

#Pendahuluan

Setelah di episode 2 kita memahami arsitektur Livewire — state di server, render Blade, morph di client — sekarang waktunya hands-on. Di episode ini kita akan menginstall Livewire di project Laravel yang sudah disiapkan di episode 0, menghubungkannya ke layout, dan membuat komponen pertama yang benar-benar berjalan.

Installasi yang benar sangat menentukan: jika layout tidak memuat @livewireStyles dan @livewireScripts, komponen akan tampil sebagai HTML statis yang tidak merespons interaksi. Kesalahan paling umum pemula bukan pada kode komponen, melainkan pada langkah ini.

#Install Livewire

Dari root project Laravel, install package Livewire:

Install Livewire

composer require livewire/livewire

Package ini mengaktifkan service provider secara otomatis (auto-discovery), jadi tidak perlu mendaftarkan manual di bootstrap/providers.php. Verifikasi versi yang terinstall:

Cek versi Livewire

composer show livewire/livewire

Tip

Di series ini kita memakai Livewire v4 (versi stable 4.4.0 per 10 Agustus 2026). Jika output menampilkan versi 3.x, project kalian kemungkinan terkunci di constraint lama atau masih Laravel 10. Pastikan Laravel 12/13 dan jalankan composer update livewire/livewire agar naik ke v4.

#Hubungkan ke Layout

Livewire memerlukan dua Blade directive di layout agar komponen bisa bekerja: @livewireStyles di dalam <head> dan @livewireScripts menjelang penutup </body>.

resources/views/layouts/app.blade.php

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@yield('title', 'Livewire Lab')</title>
    @livewireStyles
</head>
<body>
    <main>
        @yield('content')
    </main>
 
    @livewireScripts
</body>
</html>

@livewireStyles menyuntikkan CSS internal Livewire (termasuk progress bar). @livewireScripts memuat JavaScript mesin Livewire — bundle kecil yang berisi Alpine.js dan logic morphing. Tanpa directive kedua ini, wire:click dan wire:model hanya menjadi atribut HTML mati.

#Membuat Komponen Pertama

Gunakan Artisan untuk membuat komponen:

Buat komponen Counter

php artisan make:livewire counter

Perintah ini menghasilkan dua file:

Struktur yang dibuat

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

#Logika komponen

app/Livewire/Counter.php

<?php
 
namespace App\Livewire;
 
use Livewire\Component;
 
class Counter extends Component
{
    public int $count = 0;
 
    public function increment()
    {
        $this->count++;
    }
 
    public function render()
    {
        return view('livewire.counter');
    }
}

Perhatikan: public int $count = 0 adalah state (dikirim ke client dan dipertahankan antar request), sedangkan increment() adalah action yang akan dipanggil dari view.

#View komponen

resources/views/livewire/counter.blade.php

<div>
    <h1>Jumlah: {{ $count }}</h1>
    <button wire:click="increment">Tambah</button>
</div>

wire:click="increment" memberi tahu Livewire: saat tombol diklik, kirim request ke server untuk menjalankan method increment(). Setelah render ulang, nilai $count yang baru muncul tanpa reload halaman.

#Render Komponen di Halaman

Ada dua cara merender komponen: sebagai embedded component (di dalam halaman biasa) atau sebagai full-page component (halaman itu sendiri).

#Embedded component

resources/views/welcome.blade.php

@extends('layouts.app')
 
@section('content')
    <h1>Selamat datang di lab Livewire</h1>
 
    <livewire:counter />
@endsection

Sintaks <livewire:counter /> adalah cara Blade memanggil komponen. Nama komponen diturunkan dari nama class: Counter → counter.

#Full-page component

Untuk halaman yang seluruhnya dikuasai Livewire, daftarkan langsung di route:

routes/web.php

use App\Livewire\Counter;
 
Route::get('/counter', Counter::class);

Saat diakses lewat browser, Livewire otomatis mencari layout dari attribute #[Layout] atau components.layouts.app. Full-page components menjadi fondasi saat kita membangun halaman CRUD di episode 11.

#Jalankan dan Uji

Jalankan dev server

php artisan serve

Buka http://localhost:8000 (untuk embedded) atau http://localhost:8000/counter (untuk full-page). Kalian akan melihat tombol Tambah yang bekerja tanpa reload — itulah bukti pertama bahwa mesin Livewire berjalan.

Warning

Jika tombol tidak merespons atau halaman ter-reload penuh, periksa tiga hal: (1) @livewireScripts ada di layout, (2) komponen punya satu elemen root (lihat episode 2), dan (3) tidak ada JavaScript error di console browser. Sebagian besar kasus "Livewire tidak jalan" berakar pada salah satu dari tiga ini.

#Penutup

Inti yang harus dibawa pulang:

Install dengan composer require livewire/livewire; verifikasi versi dengan composer show livewire/livewire (v4.x).
@livewireStyles di <head> dan @livewireScripts sebelum </body> wajib ada di layout.
php artisan make:livewire counter menghasilkan class PHP + view Blade.
Public property = state, method = action; wire:click memicu action dari view.
Komponen bisa di-embed (<livewire:counter />) atau jadi full-page (Route::get('/counter', Counter::class)).

Di episode 4 selanjutnya kita akan membahas properties & data binding — public properties sebagai penyimpanan state antar request, tipe data array dan model, serta wire:model dengan perilaku default deferred di v4, .live untuk real-time, .debounce, .number, dan .lazy. Pastikan counter kalian sudah jalan, karena kita akan mengembangkannya menjadi form input interaktif pertama. Sampai jumpa di episode 4!