Laravel Volt adalah API fungsional untuk Livewire yang memungkinkan logika PHP dan template Blade sebuah komponen ditulis dalam satu file. Volt dipasang sebagai paket terpisah, livewire/volt, dengan dua perintah: composer require livewire/volt lalu php artisan volt:install. Panduan ini menjelaskan cara kerja Volt, cara install di Laravel 12, contoh komponen yang sudah kami uji, dan satu hal yang jarang dibahas: sejak Livewire 4, komponen satu file sudah bawaan Livewire, sehingga Volt kini bersifat opsional.
Apa Itu Laravel Volt dan Cara Kerjanya
Livewire adalah library untuk membuat antarmuka interaktif di Laravel cukup dengan PHP dan Blade, tanpa menulis JavaScript sendiri. Di Livewire 3, satu komponen biasanya terdiri dari dua file: class PHP di app/Livewire dan view Blade di resources/views/livewire.
Volt menyatukan keduanya. Kamu menulis state dan aksi di blok <?php ?> di bagian atas file Blade, lalu template di bawahnya. Di balik layar, Volt mengompilasi kode itu menjadi class komponen Livewire biasa. Jadi semua fitur Livewire tetap berlaku: wire:click, wire:model, validasi, pagination, dan lainnya.
Contoh komponen counter dengan Volt:
<?php
use function LivewireVolt{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>
Tombol diklik, Livewire mengirim request ke server, method increment dijalankan, dan angka di halaman berubah tanpa reload.
Status Volt di 2026: Livewire 4 dan Starter Kit Laravel
Bagian ini penting supaya kamu tidak salah memilih. Berikut kondisi per Oktober 2026, berdasarkan dokumentasi resmi Livewire dan Laravel:
- Livewire 4 sudah punya komponen satu file bawaan. Perintah
php artisan make:livewire sekarang membuat file Blade dengan blok PHP di atasnya, memakai sintaks yang sama dengan Volt versi class. Dokumentasi Livewire menulis bahwa Volt opsional di Livewire 4 dan sebagian besar aplikasi tidak membutuhkannya.
- Volt tetap dirawat. Versi terbaru (1.11) mendukung Livewire 3 dan 4, serta Laravel 10 sampai 13. Volt masih berguna kalau kamu suka gaya fungsional berbasis closure seperti contoh di atas.
- Starter kit Livewire di Laravel 12 saat pertama rilis (Februari 2025) memakai Volt dan Flux UI untuk semua halamannya, termasuk login dan pengaturan profil. Starter kit versi terbaru sudah beralih ke Livewire 4 tanpa Volt.
Kesimpulannya: kalau kamu memulai project baru dan suka gaya class, komponen satu file Livewire 4 sudah cukup. Kalau kamu mewarisi project yang memakai Volt (misalnya dari starter kit Laravel 12 versi awal), atau lebih suka gaya fungsional, Volt masih aman dipakai.
Cara Install Laravel Volt di Laravel 12
Kami menguji langkah ini di project Laravel 12 yang baru dibuat (Laravel 12.70, PHP 8.5). Composer otomatis memasang Livewire 4.4 bersama Volt 1.11.
composer require livewire/volt
php artisan volt:install
Perintah volt:install membuat file app/Providers/VoltServiceProvider.php dan mendaftarkannya di bootstrap/providers.php. Service provider ini menentukan folder tempat Volt mencari komponen:
public function boot(): void
{
Volt::mount([
config('livewire.view_path', resource_path('views/livewire')),
resource_path('views/pages'),
]);
}
Secara bawaan, komponen Volt dicari di resources/views/livewire dan resources/views/pages. Tambahkan folder lain ke array itu kalau perlu.
Satu koreksi untuk tutorial lama: Volt tidak otomatis ikut terpasang bersama paket livewire/livewire. Kamu tetap harus menjalankan composer require livewire/volt. Jalur lama lewat php artisan breeze:install livewire juga sudah tidak disarankan, karena Laravel Breeze tidak lagi mendapat pembaruan sejak Laravel 12. Perbandingan lengkapnya ada di artikel perbedaan Laravel Volt dan Breeze.
Cek apakah paketnya terpasang:
composer show livewire/volt
Membuat Komponen Volt Pertama
php artisan make:volt counter
File dibuat di resources/views/livewire/counter.blade.php. Isi dengan kode counter di atas, lalu tampilkan di view Blade mana saja:
<livewire:counter />
Layout halaman yang memuat komponen Livewire perlu directive @livewireStyles di dalam <head> dan @livewireScripts sebelum </body>. Kalau kamu belum punya layout, jalankan:
php artisan livewire:layout
Perintah itu membuat resources/views/layouts/app.blade.php yang sudah berisi kedua directive tersebut. Di Livewire 4, file inilah yang dipakai sebagai layout bawaan untuk komponen halaman penuh.
Functional API vs Class API
Volt punya dua gaya penulisan. Contoh counter di atas memakai functional API. Untuk komponen yang lebih besar, class API biasanya lebih mudah dibaca. Buat dengan opsi --class:
php artisan make:volt todo --class
<?php
use LivewireVoltComponent;
new class extends Component {
public string $task = '';
public array $tasks = [];
public function add(): void
{
$this->validate(['task' => 'required|min:3']);
$this->tasks[] = $this->task;
$this->reset('task');
}
}; ?>
<div>
<form wire:submit="add">
<input type="text" wire:model="task" placeholder="Tugas baru">
<button type="submit">Tambah</button>
@error('task') <span>{{ $message }}</span> @enderror
</form>
<ul>
@foreach ($tasks as $item)
<li>{{ $item }}</li>
@endforeach
</ul>
</div>
|
Functional API |
Class API |
| Cara menulis state |
state(['count' => 0]) |
Properti publik public int $count = 0; |
| Cara menulis aksi |
Closure: $increment = fn () => ... |
Method biasa |
| Cocok untuk |
Komponen kecil dan sederhana |
Komponen dengan banyak aksi, validasi, atau trait |
| Pindah ke Livewire 4 tanpa Volt |
Perlu ditulis ulang ke gaya class |
Cukup ganti satu baris import |
Komponen Volt sebagai Halaman Penuh
Komponen Volt bisa langsung dipasang ke URL tanpa controller:
use LivewireVoltVolt;
Volt::route('/todo', 'todo');
Buka /todo dan komponen akan tampil di dalam layout layouts/app. Kalau muncul error No hint path defined for [layouts], berarti file layout belum ada. Jalankan php artisan livewire:layout seperti di atas.
Menguji Komponen Volt
Volt menyediakan helper test yang bisa dipakai di PHPUnit maupun Pest:
use LivewireVoltVolt;
public function test_counter_bertambah(): void
{
Volt::test('counter')
->call('increment')
->call('increment')
->assertSet('count', 2);
}
Volt atau Komponen Satu File Livewire 4?
Ini komponen yang sama dengan sintaks bawaan Livewire 4, tanpa Volt. Kami membuatnya dengan php artisan make:livewire search-box:
<?php
use LivewireComponent;
new class extends Component
{
public string $query = '';
};
?>
<div>
<input type="text" wire:model.live="query" placeholder="Cari...">
<p>Kata kunci: {{ $query }}</p>
</div>
Bedanya dengan Volt class API hanya pada baris import (LivewireComponent, bukan LivewireVoltComponent). Livewire 4 menyimpan file ini di resources/views/components dengan awalan emoji ⚡ di nama file (bisa dimatikan lewat konfigurasi). Untuk route, pakai Route::livewire('/cari', 'search-box').
Kalau suatu saat ingin melepas Volt, panduan upgrade Livewire 4 menyebut langkahnya:
- Ganti
use LivewireVoltComponent; menjadi use LivewireComponent;.
- Ganti
Volt::route() menjadi Route::livewire().
- Di test, ganti
Volt::test() menjadi Livewire::test().
- Hapus
app/Providers/VoltServiceProvider.php dan entrinya di bootstrap/providers.php.
- Jalankan
composer remove livewire/volt.
Komponen dengan functional API (state(), closure) perlu ditulis ulang ke gaya class sebelum langkah di atas.
Kapan Volt Cocok, Kapan Tidak
Volt dan komponen satu file cocok untuk komponen yang berdiri sendiri: form pencarian, counter, toggle, form kontak, atau halaman pengaturan. Logika dan tampilan ada di satu tempat, jadi mudah dirawat.
Pertimbangkan komponen class terpisah (atau multi-file component di Livewire 4) kalau logikanya sudah panjang, perlu dipakai ulang lewat inheritance, atau tim kamu lebih nyaman memisahkan PHP dan Blade. Logika bisnis yang berat, misalnya perhitungan stok atau integrasi pembayaran, sebaiknya tetap di class service atau controller, lalu dipanggil dari komponen.
Laravel Volt Bukan Laravolt
Nama yang mirip sering membuat bingung. Laravel Volt (livewire/volt) adalah API komponen untuk Livewire yang dibahas di artikel ini. Laravolt adalah proyek berbeda: platform untuk membangun aplikasi Laravel (paket Composer laravolt/laravolt), dengan dokumentasi sendiri di laravolt.dev. Keduanya tidak berhubungan.
Pertanyaan yang Sering Diajukan
Apakah Laravel Volt sudah termasuk di Livewire?
Tidak. Volt adalah paket terpisah, livewire/volt, yang harus dipasang lewat Composer. Yang sudah bawaan di Livewire 4 adalah komponen satu file dengan gaya class, yang sintaksnya sama dengan Volt class API.
Apakah Volt masih layak dipelajari di 2026?
Layak kalau kamu merawat project yang sudah memakai Volt, termasuk project dari starter kit Livewire versi awal Laravel 12. Untuk project baru, komponen satu file Livewire 4 lebih sederhana karena tidak perlu paket tambahan.
Livewire itu dipakai untuk apa?
Livewire dipakai untuk membuat halaman interaktif, seperti form dengan validasi langsung, pencarian tanpa reload, tabel dengan filter, dan dashboard, cukup dengan PHP dan Blade. Cocok untuk tim yang lebih kuat di backend Laravel dibanding framework JavaScript.
Apakah Volt bisa dipakai di Laravel 11 atau 13?
Bisa. Volt 1.11 mendukung Laravel 10, 11, 12, dan 13, dengan Livewire 3.6 ke atas atau Livewire 4.
Ingin membangun dashboard atau aplikasi internal dengan Laravel dan Livewire tetapi tidak punya waktu mengerjakannya sendiri? Tim Arrazy Inovasi di Purwokerto mengerjakan sistem aplikasi custom berbasis Laravel. Materi Laravel lainnya ada di halaman tutorial Laravel.
Diskusikan kebutuhan aplikasi kamu →