Sarıkaya Dev Logo
design

Laravel'de Alpine.js'yi Livewire ile Kullanma

March 15, 2025

Alpine.js, Livewire bileşenleri içinde x-data, x-model, x-show gibi direktiflerle dinamik işlemler yapmana olanak tanır.


📌 Örnek: Modal Penceresi

Bu örnekte, Alpine.js kullanarak bir modal penceresini açıp kapatıyoruz.

1. Livewire Bileşeni Oluştur



Terminal

sh

sh
php artisan make:livewire ModalComponent

2. Livewire Bileşeni Güncelle (app/Http/Livewire/ModalComponent.php)

php dosyası

ModalComponent.php

php
namespace App\Http\Livewire;

use Livewire\Component;

class ModalComponent extends Component
{
    public $showModal = false;

    public function openModal()
    {
        $this->showModal = true;
    }

    public function closeModal()
    {
        $this->showModal = false;
    }

    public function render()
    {
        return view('livewire.modal-component');
    }
}

3. Blade Dosyasını Güncelle (resources/views/livewire/modal-component.blade.php)

php dosyası

modal-component.blade.php

php
<div>
    <!-- Buton -->
    <button @click="showModal = true" class="px-4 py-2 bg-blue-600 text-white">Modal Aç</button>

    <!-- Modal -->
    <div x-data="{ showModal: @entangle('showModal') }" x-show="showModal" class="fixed inset-0 flex items-center justify-center bg-gray-900 bg-opacity-50">
        <div class="bg-white p-6 rounded-lg shadow-lg">
            <h2 class="text-lg font-bold">Alpine.js ve Livewire Modal</h2>
            <p>Bu, Livewire ve Alpine.js ile oluşturulmuş bir modal penceredir.</p>
            <button @click="showModal = false" class="mt-4 px-4 py-2 bg-red-500 text-white">Kapat</button>
        </div>
    </div>
</div>

4. Livewire Bileşenini Blade İçine Dahil Et


Ana Blade dosyana Livewire bileşenini eklemelisin:

html

html
@livewire('modal-component')

4. Livewire Bileşenini Blade İçine Dahil Et


🔹 Livewire ile Alpine.js'nin Birlikte Çalışması

  • @entangle('değer'): Livewire ve Alpine.js arasında iki yönlü veri bağlama sağlar.
  • x-data: Alpine.js'nin bileşeni yönetmesini sağlar.
  • x-show: Şartlı gösterme işlemi yapar.

🔥 Livewire ve Alpine.js'nin Avantajları

✅ Livewire sayesinde sunucu tarafında veri yönetimi yapabilirsin.

✅ Alpine.js, Livewire'ın AJAX isteklerini tetiklemeden ön yüz işlemlerini yapar.

✅ Sayfa yenilemeye gerek kalmadan dinamik bileşenler oluşturabilirsin.


7 + 7 =