Cara Instalasi Laravel Volt di Laravel 12: Panduan Lengkap

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 migrate

Setelah 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 --config

Tambahkan 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-box

File 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 serve

Kalau komponen muncul dan reaktif (bisa klik/input tanpa reload halaman), instalasi berhasil.

Baca Juga

• Apa Itu Laravel Volt dan Bagaimana Cara Kerjanya
• Perbedaan Laravel Volt dan Laravel Breeze

Mau membangun aplikasi web interaktif dengan Laravel + Livewire? Lihat layanan pengembangan aplikasi kami.