Keunggulan Laravel Volt: Single-File Component yang Efisien

Setelah cukup banyak pakai Livewire biasa, saya coba beralih ke Volt di salah satu proyek internal. Hasilnya memang ada perbedaan yang terasa, terutama saat nambah fitur baru atau onboarding developer junior ke proyek.

Artikel ini membahas keunggulan nyata Laravel Volt dibanding cara penulisan Livewire sebelumnya, lengkap dengan contoh kode perbandingan.

1. Single-File Component: Logika dan Template Dalam Satu Tempat

Livewire biasa butuh dua file per komponen. Volt hanya butuh satu.

Livewire biasa:

// app/Livewire/SearchBox.php
class SearchBox extends Component
{
    public string $query = '';

    public function updatedQuery(): void
    {
        // filter results
    }

    public function render()
    {
        return view('livewire.search-box');
    }
}

{{-- resources/views/livewire/search-box.blade.php --}}
<div>
    <input wire:model.live="query" />
</div>

Volt (satu file):

<?php

use function LivewireVolt{state};

state(['query' => '']);

$updatedQuery = fn() => /* filter results */;

?>

<div>
    <input wire:model.live="query" />
</div>

Lebih sedikit file = lebih mudah navigasi, lebih mudah review PR.

2. Computed Properties yang Lebih Eksplisit

Livewire v2 punya computed properties tapi agak tersembunyi. Volt mengekspos ini dengan cara yang lebih jelas:

<?php

use AppModelsProduct;
use function LivewireVolt{state, computed};

state(['category' => 'all']);

$products = computed(function () {
    return $this->category === 'all'
        ? Product::paginate(12)
        : Product::where('category', $this->category)->paginate(12);
});

?>

<div>
    <select wire:model.live="category">
        <option value="all">Semua</option>
        <option value="elektronik">Elektronik</option>
    </select>

    @foreach ($this->products as $product)
        <p>{{ $product->name }}</p>
    @endforeach

    {{ $this->products->links() }}
</div>

Computed property otomatis di-cache selama satu request, tidak dihitung ulang setiap setiap kali template render.

3. Lifecycle Hooks yang Lebih Bersih

Volt mendukung lifecycle hooks Livewire dengan cara yang lebih ringkas:

<?php

use AppModelsCart;
use function LivewireVolt{state, mount, updated};

state(['quantity' => 1, 'productId' => null]);

mount(function (int $productId) {
    $this->productId = $productId;
});

updated('quantity', function () {
    if ($this->quantity < 1) $this->quantity = 1;
    if ($this->quantity > 99) $this->quantity = 99;
});

$addToCart = function () {
    Cart::addItem($this->productId, $this->quantity);
    $this->dispatch('cart-updated');
};

?>

<div>
    <input wire:model="quantity" type="number" />
    <button wire:click="addToCart">Tambah ke Keranjang</button>
</div>

4. Form Handling yang Lebih Bersih

Volt mendukung Form Objects dari Livewire v3:

<?php

use AppLivewireFormsContactForm;
use function LivewireVolt{form};

form(ContactForm::class, 'contact');

$submit = function () {
    $this->contact->submit();
    $this->reset('contact');
};

?>

<form wire:submit="submit">
    <input wire:model="contact.name" />
    <input wire:model="contact.email" />
    <textarea wire:model="contact.message"></textarea>
    <button type="submit">Kirim</button>
</form>

5. Lebih Mudah Dipahami oleh Developer Baru

Ini mungkin yang paling terasa di tim. Dengan Volt, developer yang baru bergabung cukup buka satu file untuk memahami apa yang dilakukan sebuah komponen. Tidak perlu loncat antara dua file untuk trace logika.

Baca Juga

• Apa Itu Laravel Volt dan Bagaimana Cara Kerjanya
• Cara Instalasi Laravel Volt di Laravel 12

Tertarik membangun aplikasi dengan Laravel + Livewire + Volt? Lihat layanan pengembangan aplikasi kami.