Kalau Anda pernah pakai Livewire di Laravel, mungkin sudah tahu betapa nyamannya bikin komponen reaktif tanpa harus tulis JavaScript. Laravel Volt membawa pengalaman itu selangkah lebih jauh dengan sintaks single-file component yang lebih bersih.

Artikel ini menjelaskan apa itu Laravel Volt, bagaimana cara kerjanya, dan di mana Volt cocok dipakai.

Apa Itu Laravel Volt?

Laravel Volt adalah API baru untuk Livewire v3 yang memungkinkan Anda menulis komponen Livewire dalam satu file Blade, tanpa class PHP terpisah.

Sebelum Volt, sebuah komponen Livewire butuh dua file:

app/Livewire/Counter.php — class dengan logika
resources/views/livewire/counter.blade.php — template

Dengan Volt, keduanya bisa dalam satu file counter.blade.php:

<?php

use function LivewireVolt{state, computed};

state(['count' => 0]);

$increment = fn() => $this->count++;
$decrement = fn() => $this->count--;

?>

<div>
    <h1>{{ $count }}</h1>
    <button wire:click="increment">+</button>
    <button wire:click="decrement">-</button>
</div>

Lebih ringkas, dan semua yang perlu dibaca ada dalam satu file.

Perbedaan Volt Class API vs Functional API

Volt mendukung dua cara penulisan. Functional API (contoh di atas) lebih ringkas untuk komponen sederhana. Class API cocok untuk komponen yang lebih kompleks karena lebih terstruktur:

<?php

use LivewireVoltComponent;

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

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

    public function decrement(): void
    {
        $this->count--;
    }
} ?>

<div>
    <h1>{{ $count }}</h1>
    <button wire:click="increment">+</button>
    <button wire:click="decrement">-</button>
</div>

Apa Yang Volt Sederhanakan?

Volt bukan framework baru, melainkan layer di atas Livewire v3. Yang berubah:

Satu file per komponen: tidak perlu buka dua file sekaligus saat edit
Co-location: logika dan template ada di satu tempat, lebih mudah dipahami konteksnya
Lebih sedikit boilerplate: tidak perlu bikin class, register namespace, dll.

Yang tetap sama: cara Livewire bekerja (wire:click, wire:model, $refresh, dll.) tidak berubah sama sekali.

Kapan Pakai Volt vs Livewire Biasa?

Volt cocok untuk komponen yang:

Logikanya tidak terlalu besar (kurang dari ~100 baris)
Tidak perlu di-extend atau di-inherit komponen lain
Berdiri sendiri dan tidak terlalu banyak dependency

Tetap pakai Livewire class biasa kalau:

Komponen butuh extend dari base class kustom
Logikanya sudah terlalu panjang dan butuh dipisah ke service
Tim lebih familiar dengan pola class-based

Apa Itu Laravel Volt dan Bagaimana Cara Kerjanya