Laravel Livewire: Full-Stack Components Olmadan JavaScript

Livewire Nedir?

Livewire, Laravel için full-stack framework'tür. JavaScript yazmadan dinamik, reactive interfaces oluşturmanızı sağlar.

Kurulum

composer require livewire/livewire

# Layout'a ekle
@livewireStyles
@livewireScripts

İlk Component

# Oluştur
php artisan make:livewire Counter

// app/Livewire/Counter.php
class Counter extends Component
{
    public int $count = 0;

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

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

// resources/views/livewire/counter.blade.php
<div>
    <h1>{{ $count }}</h1>
    <button wire:click="increment">+</button>
</div>

// Blade'de kullan
<livewire:counter />

Two-Way Data Binding

class SearchUsers extends Component
{
    public string $search = '';

    public function render()
    {
        return view('livewire.search-users', [
            'users' => User::where('name', 'like', "%{$this->search}%")->get()
        ]);
    }
}

// View
<input type="text" wire:model.live="search" placeholder="Ara...">

@foreach($users as $user)
    <div>{{ $user->name }}</div>
@endforeach

Form Validation

class CreatePost extends Component
{
    public string $title = '';
    public string $content = '';

    protected $rules = [
        'title' => 'required|min:3',
        'content' => 'required|min:10',
    ];

    public function save()
    {
        $validated = $this->validate();

        Post::create($validated);

        session()->flash('message', 'Post oluşturuldu!');

        return redirect()->to('/posts');
    }
}

// View
<form wire:submit="save">
    <input wire:model="title" type="text">
    @error('title') <span>{{ $message }}</span> @enderror

    <textarea wire:model="content"></textarea>
    @error('content') <span>{{ $message }}</span> @enderror

    <button type="submit">Kaydet</button>
</form>

Loading States

<button wire:click="save">
    <span wire:loading.remove>Kaydet</span>
    <span wire:loading>Kaydediliyor...</span>
</button>

<div wire:loading wire:target="search">
    Aranıyor...
</div>

Alpine.js Entegrasyonu

<div x-data="{ open: false }">
    <button @click="open = true">Modal Aç</button>

    <div x-show="open" @click.away="open = false">
        <livewire:edit-user :user="$user" />
    </div>
</div>

File Uploads

use WithFileUploads;

public $photo;

public function save()
{
    $this->validate(['photo' => 'image|max:1024']);
    $this->photo->store('photos');
}

// View
<input type="file" wire:model="photo">
@if ($photo)
    <img src="{{ $photo->temporaryUrl() }}">
@endif

Pagination

use WithPagination;

public function render()
{
    return view('livewire.posts', [
        'posts' => Post::paginate(10)
    ]);
}

// View
{{ $posts->links() }}

Sonuç

Livewire, Vue/React öğrenmeden dinamik UI oluşturmak için mükemmel. Laravel ekosistemiyle tam uyumlu.