Laravel Volt sudah termasuk dalam Livewire v3, jadi cara installnya lebih mudah dari yang Anda bayangkan. Artikel ini membahas dua jalur instalasi: lewat Laravel Breeze, dan langsung lewat Livewire.
Prasyarat
- PHP 8.1 atau lebih baru
- Laravel 10 ke atas (disarankan Laravel 12)
- Composer
Jalur 1: Install via Laravel Breeze
Ini jalur paling umum. Breeze menyediakan scaffolding autentikasi lengkap sekaligus menginstall Volt.
# Buat project Laravel baru
composer create-project laravel/laravel nama-project
cd nama-project
# Install Breeze
composer require laravel/breeze --dev
# Install dengan opsi Livewire (Volt sudah termasuk)
php artisan breeze:install livewire
# Install dependencies Node.js dan build assets
npm install && npm run dev
# Jalankan migration
php artisan migrateSetelah ini, Anda langsung punya halaman login, register, dan dashboard yang sudah jalan dengan Livewire + Volt.
Jalur 2: Install Livewire + Volt Langsung
Kalau tidak butuh scaffolding autentikasi dari Breeze:
# Di project Laravel yang sudah ada
composer require livewire/livewire
# Volt sudah termasuk di dalam package livewire/livewire v3
# Aktifkan Volt dengan publish config
php artisan livewire:publish --configTambahkan direktif Livewire di layout utama Anda (resources/views/layouts/app.blade.php):
<html>
<head>
...
@livewireStyles
</head>
<body>
{{ $slot }}
@livewireScripts
</body>
</html>Konfigurasi Path Komponen Volt
Secara default, komponen Volt disimpan di resources/views/livewire/. Anda bisa konfigurasi lewat app/Providers/AppServiceProvider.php:
<?php
namespace App\Providers;
use Illuminate\Support\ServiceProvider;
use Livewire\Volt\Volt;
class AppServiceProvider extends ServiceProvider
{
public function boot(): void
{
// Tambah folder komponen Volt
Volt::mount([
resource_path('views/livewire'),
resource_path('views/pages'), // tambahan
]);
}
}Membuat Komponen Volt Pertama
php artisan make:volt search-boxFile dibuat di resources/views/livewire/search-box.blade.php:
<?php
use function Livewire\Volt\{state};
state(['query' => '']);
?>
<div>
<input
wire:model.live.debounce.300ms="query"
placeholder="Cari..."
class="border rounded px-3 py-2"
/>
@if($query)
<p>Mencari: {{ $query }}</p>
@endif
</div>Gunakan di halaman Blade mana saja:
<livewire:search-box />Verifikasi Instalasi
# Pastikan Livewire terinstall
composer show livewire/livewire
# Jalankan server dan cek halaman yang ada komponen Volt
php artisan serveKalau komponen muncul dan reaktif (bisa klik/input tanpa reload halaman), instalasi berhasil.
Baca Juga
Mau membangun aplikasi web interaktif dengan Laravel + Livewire? Lihat layanan pengembangan aplikasi kami.
Leave a Reply