Livewire

Livewire, Laravel geliştiricilerinin karmaşık JavaScript SPA framework'lerine (React, Vue vb.) ihtiyaç duymadan, yalnızca PHP ve Blade kullanarak modern, reaktif ve dinamik kullanıcı arayüzleri geliştirmesini sağlayan tam yığın (full-stack) bir kütüphanedir.

Neden Tercih Edilmeli?

• Blade Konforu: Tüm arayüz mantığınızı ve şablonlarınızı alışık olduğunuz Blade sözdizimiyle yazarsınız.
• Sıfır API İhtiyacı: Ayrı REST veya GraphQL uç noktaları oluşturmadan PHP sınıfı ile arayüz arasında doğrudan iki yönlü veri bağlama (two-way data binding) kurar.
• Canlı Validasyon & Dosya Yükleme: Form doğrulama kuralları ve çoklu dosya yüklemeleri arka planda anlık olarak işlenir.
• Alpine.js Entegrasyonu: İstemci tarafı hafif animasyonlar ve durum yönetimi için Alpine.js ile kusursuz uyum sağlar.
• SPA Deneyimi (Wire:Navigate): Sayfalar arası geçişlerde tam sayfa yenilemesi olmadan SPA akıcılığı sunar.

Kurulum

Composer ile Livewire v3'ü projenize dahil edin:

composer require livewire/livewire

İsteğe bağlı olarak yapılandırma dosyasını yayınlayabilirsiniz:

php artisan livewire:publish --config

Temel Kullanım

Bileşen Oluşturma

Artisan komutu ile yeni bir Livewire bileşeni oluşturun:

php artisan make:livewire Counter

Bu komut iki dosya oluşturur:

1. app/Livewire/Counter.php
2. resources/views/livewire/counter.blade.php

Bileşen Sınıfı (PHP)

namespace App\Livewire;

use Livewire\Component;

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

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

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

    public function render()
    {
        return view('livewire.counter');
    }
}

Bileşen Görünümü (Blade)

<div class="p-6 bg-dark border border-secondary rounded-3 text-center">
    <h2 class="text-white text-2xl font-bold mb-4">Sayaç: {{ $count }}</h2>

    <div class="flex justify-center gap-3">
        <button wire:click="decrement" class="btn btn-secondary px-4 py-2">
            Azalt (-)
        </button>
        <button wire:click="increment" class="btn btn-primary px-4 py-2">
            Arttır (+)
        </button>
    </div>

    <!-- Yüklenme Göstergesi -->
    <div wire:loading class="text-sm text-warning mt-2">
        İşlem yapılıyor...
    </div>
</div>

Blade Sayfasına Dahil Etme

Bileşeni herhangi bir standart Blade şablonunda şu şekilde çağırabilirsiniz:

<livewire:counter />
{{-- veya --}}
@livewire('counter')

Gerçek Zamanlı Form ve Arama Örneği

namespace App\Livewire;

use App\Models\User;
use Livewire\Component;
use Livewire\WithPagination;

class UserSearch extends Component
{
    use WithPagination;

    public string $search = '';

    public function updatingSearch(): void
    {
        $this->resetPage();
    }

    public function render()
    {
        $users = User::query()
            ->when($this->search, fn ($q) => $q->where('name', 'like', "%{$this->search}%"))
            ->paginate(10);

        return view('livewire.user-search', [
            'users' => $users,
        ]);
    }
}

<div>
    <input 
        type="text" 
        wire:model.live.debounce.300ms="search" 
        placeholder="Kullanıcı ara..." 
        class="form-control mb-4"
    />

    <ul class="list-group">
        @forelse($users as $user)
            <li class="list-group-item bg-dark text-white">{{ $user->name }} - {{ $user->email }}</li>
        @empty
            <li class="list-group-item bg-dark text-muted">Kullanıcı bulunamadı.</li>
        @endforelse
    </ul>

    <div class="mt-3">
        {{ $users->links() }}
    </div>
</div>