Memahami Livewire Components di Livewire 4

Kalau kita tarik ke konsep paling dasarnya, Livewire component itu sebenarnya cuma dua hal:

PHP class yang bisa langsung “ngobrol” sama Blade

Dan kombinasi ini yang bikin Livewire unik.

Kita bisa bikin UI interaktif full-stack:

• tanpa Vue
• tanpa React
• tanpa build step ribet

Cukup PHP + Blade + sedikit directive.

Di tutorial ini, kita akan bahas:

• cara membuat component
• jenis-jenis component di Livewire 4
• cara render & passing data
• sampai cara mengorganisasi component biar project tetap sehat

Pelan-pelan, satu konsep sekali jalan.

1. Membuat Livewire Component

Cara paling standar bikin component adalah lewat Artisan:

php artisan make:livewire post.create

Di Livewire 4, default-nya adalah single-file component, dan file-nya akan muncul di:

resources/views/components/post/⚡create.blade.php

Isinya kira-kira seperti ini:

<?php

use Livewire\Component;

new class extends Component {
    public $title = '';

    public function save()
    {
        // logic simpan data
    }
};
?>

<div>
    <input wire:model="title" type="text">
    <button wire:click="save">Save Post</button>
</div>

Catatan penting Dalam satu file ini:

• bagian atas → PHP logic
• bagian bawah → Blade template
• (opsional) bisa ditambah <style> dan <script>

Ini bikin semua yang berhubungan dengan satu komponen ngumpul di satu tempat.

2. Kenapa Nama File-nya Pakai Emoji ⚡?

Pertanyaan klasik

Jawabannya sederhana tapi kepake banget:

• gampang dibedain dari Blade biasa
• gampang dicari di file tree
• visually “ngeh” kalau ini Livewire

Dan tenang… Kalau kamu tim “serius enterprise tanpa emoji”, bisa dimatikan:

// config/livewire.php
'make_command' => [
    'emoji' => false,
],

3. Membuat Page Components (Komponen Halaman)

Livewire 4 membedakan:

• UI component biasa
• page component (halaman penuh)

Untuk halaman, gunakan namespace pages:::

php artisan make:livewire pages::post.create

Hasilnya:

resources/views/pages/post/⚡create.blade.php

Kenapa ini bagus?

• jelas mana komponen halaman
• jelas mana komponen reusable
• struktur project jadi kebaca

Dan page component ini nanti bisa langsung dipakai di routing.

4. Multi-file Components (Kalau Komponen Sudah Gede)

Single-file itu enak… sampai komponenmu:

• panjang
• banyak JS
• banyak CSS

Di situ multi-file component (MFC) jadi penyelamat.

Bikinnya:

php artisan make:livewire post.create --mfc

Strukturnya:

resources/views/components/post/⚡create/
├── create.php
├── create.blade.php
├── create.js
├── create.css
├── create.global.css
└── create.test.php

Semua masih satu folder Tapi lebih ramah IDE Lebih nyaman buat tim besar

5. Convert Antar Format (Tanpa Ribet)

Livewire 4 punya command sakti:

php artisan livewire:convert post.create

Atau eksplisit:

php artisan livewire:convert post.create --mfc
php artisan livewire:convert post.create --sfc

Bisa bolak-balik Nggak perlu bikin ulang Aman buat refactor

6. Kapan Pakai Format Apa?

Ringkasnya:

Single-file (default)

• komponen kecil–menengah
• cepat dipahami
• ideal untuk 80% kasus

Multi-file

• komponen kompleks
• banyak JS / CSS
• butuh struktur rapi

Class-based

• migrasi dari v2/v3
• tim sudah terbiasa pola lama
• kebutuhan enterprise tertentu

7. Render Livewire Component di Blade

Cara render paling dasar:

<livewire:component-name />

Kalau ada subfolder:

<livewire:post.create />

Kalau pakai namespace:

<livewire:pages::post.create />

Ingat: folder → pakai titik (.) namespace → pakai ::

8. Passing Data (Props) ke Component

Static value:

<livewire:post.create title="Judul Awal" />

Dynamic value:

<livewire:post.create :title="$initialTitle" />

Di component:

public $title;

public function mount($title = null)
{
    $this->title = $title;
}

Atau versi ringkas (tanpa mount()):

public $title;

Livewire akan auto-set.

Catatan penting (sering bikin bingung) Props tidak reactive secara default. Kalau nilai di parent berubah setelah page load, child tidak ikut update.

Ini bukan bug — ini desain.

9. Route Parameter sebagai Props

Kalau component dipakai sebagai halaman:

Route::livewire('/posts/{id}', 'pages::post.show');
public function mount($id)
{
    $this->postId = $id;
}

Lebih cakep lagi, pakai route model binding:

Route::livewire('/posts/{post}', 'pages::post.show');
public Post $post;

Tanpa mount(). Bersih.

10. Page Components (Tanpa Controller!)

Ini salah satu kekuatan terbesar Livewire.

Route::livewire('/posts/create', 'pages::post.create');

Tidak ada controller. Tidak ada method index/store.

Logic → component View → component State → component

Tetap bisa:

• layout
• title
• slot
• binding route

11. Mengakses Data di View

a. Public Properties

public $title = 'My Post';
<h1>{{ $title }}</h1>

b. Protected Properties (aman)

protected $apiKey = 'secret';

Akses via:

{{ $this->apiKey }}

Tidak dikirim ke frontend Cocok buat data sensitif

12. Computed Properties (Wajib Tahu!)

use Livewire\Attributes\Computed;

#[Computed]
public function posts()
{
    return Post::latest()->get();
}
@foreach ($this->posts as $post)
    {{ $post->title }}
@endforeach

Query di-cache per request Cocok untuk data berat Kombinasi maut dengan Islands

13. render() Method (Kayak Controller)

public function render()
{
    return $this->view([
        'author' => auth()->user(),
        'now' => now(),
    ]);
}

Ingat: render() jalan setiap update Jangan taruh query berat tanpa alasan.

14. Mengorganisasi Component (Namespace)

Default:

• pages::
• layouts::

Tambah sendiri:

// config/livewire.php
'component_namespaces' => [
    'admin' => resource_path('views/admin'),
    'widgets' => resource_path('views/widgets'),
],

Pakai:

php artisan make:livewire admin::users-table
<livewire:admin::users-table />

15. Class-based Components (Masih Didukung)

php artisan make:livewire CreatePost --class

Hasil:

• app/Livewire/CreatePost.php
• resources/views/livewire/create-post.blade.php

Gunakan kalau:

• migrasi dari v3
• tim sudah nyaman pola lama

16. Custom Stub (Advanced)

Kalau kamu punya standar internal:

php artisan livewire:stubs

Bisa custom:

• struktur file
• isi default component
• boilerplate JS / CSS

17. Troubleshooting Umum

Component not found

• cek path
• cek nama (dot & namespace)
• php artisan view:clear

Blank / tidak render

• pastikan satu root element
• cek error PHP di bagian atas file
• lihat storage/logs/laravel.log

Konflik nama component

• nama file sama di folder berbeda
• solusinya: namespace atau rename

Penutup

Kalau boleh dirangkum:

Livewire 4 bikin component lebih dekat ke cara manusia mikir, bukan cuma ke cara framework bekerja.