Apa Itu Laravel Volt dan Bagaimana Cara Kerjanya

Arrazy Inovasi — Thu, 24 Sep 2026 22:37:42 +0000

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:

use function Livewire\Volt\{state};

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:

use Livewire\Volt\Component;

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

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

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

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, dan seterusnya) tidak berubah sama sekali.

Kapan Pakai Volt vs Livewire Biasa?

Volt cocok untuk komponen yang:

Logikanya tidak terlalu besar
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

Tulisan ini pertama kali terbit di blog Arrazy Inovasi Teknologi, tempat kami berbagi tutorial Laravel dan Golang sambil membangun aplikasi untuk klien.

DEV Community: Arrazy Inovasi

Apa Itu Laravel Volt dan Bagaimana Cara Kerjanya