Laravel Volt Tek Dosya Bileşenleri: Boilerplate Kodu Olmadan Livewire Arayüzleri Oluşturma

Livewire bileşenleri geliştirmeye başladıysanız, süreci biliyorsunuz: app/Livewire dizininde bir PHP sınıfı oluşturmak, resources/views/livewire dizininde bir Blade görünümü eklemek, bunları birleştirmek ve tekrar etmek. Karmaşık bileşenler için bu ayrım avantaj sağlar. Ancak basit bileşenlerde — bir sayaç, arama girişi, geçiş butonu — gereksiz karmaşa yaratır.

Laravel Volt bu durumu çözüyor. Livewire v3 ile birlikte tanıtılan Volt, bileşeninizin mantığını ve şablonunu tek bir .blade.php dosyasında tanımlamanıza olanak tanır. Bunu Vue’daki tek dosya bileşen (SFC) düzenine benzetebilirsiniz; ancak TALL yığını için. Yeni bir sınıf dosyasına veya eşleşen bir görünüm dosyasına gerek yok. Tek bir dosya, tam Livewire gücü.

Volt’in Kurulumu ve Ayarlanması

Volt, Livewire yığını seçildiğinde Laravel Breeze ile birlikte gelir, ancak bunu herhangi bir Livewire v3 projesine manuel olarak ekleyebilirsiniz:

composer require livewire/volt
php artisan volt:install

Bu, hizmet sağlayıcısını yayımlar ve Volt bileşen keşif yolunu kaydeder. Varsayılan olarak, Volt resources/views/livewire dizinini tarar. Bunu app/Providers/VoltServiceProvider.php içinde özelleştirebilirsiniz:

Volt::mount([
    resource_path('views/livewire'),
    resource_path('views/pages'),
]);

Bu dizinlerdeki Volt API’sini kullanan her şey, bir Volt bileşeni olarak kabul edilir.

İlk Volt Bileşeniniz

resources/views/livewire/counter.blade.php dosyasını oluşturun:

use function Livewire\Volt\{state, computed};

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

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

?>

 class="flex items-center gap-4 p-4">
     wire:click="decrement" class="px-3 py-1 bg-red-500 text-white rounded">
        −
    
     class="text-xl font-bold">{{ $count }}
     wire:click="increment" class="px-3 py-1 bg-green-500 text-white rounded">
        +
    

Bunu standart Livewire etiketiyle herhangi bir yerde render edebilirsiniz:

Bu, tüm bileşeni kapsar. Hiçbir sınıf dosyası ve ayrı bir Blade dosyası yok. Yukarıdaki PHP bloğu, bileşen tanımınızdır.

Volt API’si: State, Computed, Actions ve Lifecycle

Volt, temiz bir işlevsel API sunar. İşte pratik bir referans:

State

use function Livewire\Volt\{state};

// Basit varsayılanlar
state(['search' => '', 'page' => 1]);

// Tembel başlatma (erişildiğinde bir kez çalışır)
state(['posts' => fn () => Post::latest()->get()]);

Computed Özellikler

use function Livewire\Volt\{state, computed};

state(['search' => '']);

$filteredUsers = computed(function () {
    return User::where('name', 'like', "%{$this->search}%")->get();
});

Şablonda $this->filteredUsers veya basitçe $filteredUsers olarak erişim sağlayabilirsiniz.

Actions

Actions, değişkenlere atanan closures’dır:

$save = function () {
    $this->validate([
        'title' => 'required|min:3',
        'body'  => 'required',
    ]);

    Post::create([
        'title' => $this->title,
        'body'  => $this->body,
    ]);

    $this->dispatch('post-saved');
    $this->reset(, );
};

Lifecycle Hooks

use function Livewire\Volt\{state, on, mount};

state(['notifications' => []]);

mount(function () {
    $this->notifications = auth()->user()->unreadNotifications->toArray();
});

on(['notification-received' => function (string $message) {
    $this->notifications[] = $message;
}]);

Gerçek Bir Örnek: Canlı Arama Bileşeni

İşte gerçek bir işte kullanabileceğiniz bir bileşen — products tablosunda bir debounced canlı arama:

use App\Models\Product;
use function Livewire\Volt\{state, computed};

state(['query' => '']);

$results = computed(function () {
    if(strlen($this->query)  2) {
        return collect();
    }

    return Product::where(, , {$this->query}%")
        ->orWhere(, , {$this->query}%")
        ->limit(10)
        ->get();
});

?>

Bu, Livewire’ın reaktif durumunu Alpine.js ile dropdown görünürlüğü için birleştirir — TALL yığınının tam olarak bunun için inşa edildiği türden şık bir sinerji. Çalıştığım ajansda, UI bileşenlerinin çoğunu Volt’a taşıdık çünkü dosya sayısının azalması, özellik dallarını temiz tutuyor ve kod incelemelerini daha hızlı hale getiriyor.

Sınıf Tabanlı Volt Bileşenleri

Önemli bir mantığı olan bileşenler için, Volt aynı dosya içinde sınıf tabanlı bir sözdizimini de destekler:

use Livewire\Volt\Component;

new class extends Component {
    public string $email = ;
    public bool $subscribed = false;

    public function subscribe(): void
    {
        $this->validate([=> ]);

        Newsletter::subscribe([$this->email);

        $this->subscribed = true;
    }
};

?>


    @if ($subscribed)
        
 class="text-green-600">You've subscribed! Check your inbox.
    @else
        
    @endif

Bu, IDE otomatik tamamlama, tür ipuçları ve PHP 8 özelliklerini kullanma yeteneği sağlar — tüm bunları aynı görünümün içinde tutarken.

Volt’un Ne Zaman Kullanılacağı

Volt, geleneksel Livewire bileşenlerinin bir yerine geçmez — tamamlayıcıdır. İşte pratik bir kılavuz:

Bu sınır bulanık ve kişisel. Önemli olan, proje içinde tutarlılıktır.

Volt Bileşenlerini Test Etme

Volt bileşenleri, standart Livewire bileşenleri gibi test edilir:

use Livewire\Volt\Volt;

it(, function () {
    Volt::test()
        ->call()
        ->assertSet(, );
});

it(, function () {
    Product::factory()->create([=> ]);
    Product::factory()->create([=> ]);

    Volt::test()
        ->set(, )
        ->assertSeeHtml()
        ->assertDontSeeHtml();
});

Volt::test() yardımcı fonksiyonu, bileşeni görünüm yol adıyla çözer, tıpkı gibi.

Sonuç

Laravel Volt, Livewire ekosistemine iyi düşünülmüş bir ekleme. Hiçbir şeyi yeniden icat etmiyor — Livewire’ın reaktivite modeli değişmedi. Sadece gerekli olmayan bileşenler için dosya oluşturma prosedürünü kaldırıyor. Sonuç olarak, daha hızlı bir geliştirme süreci, daha az bağlam değiştirme ve gezinmesi kayda değer ölçüde daha kolay bir kod tabanı elde ediyorsunuz.

Eğer Livewire v3 üzerinde çalışıyorsanız ve henüz Volt’u denemediyseniz, bir sonraki küçük bileşeninizle başlayın. API, hızla kavranabilir ve beklediğinizden daha sık başvurunuz olabilir. Üretim Laravel uygulamaları geliştiren ekipler için — özellikle Livewire’ı üst düzey UI etkileşimleri için Alpine.js ile harmanlayanlar — Volt artık isteğe bağlı bir araç değil, standart bir araçtır.

Modern Laravel kalıplarının bu türlerinin daha büyük uygulama mimarilerine nasıl uyduğuna dair daha fazla bilgi edinmek istiyorsanız, bu alandaki çalışmalar hakkında daha fazla bilgi bulabilirsiniz.