Yazılım

LiVue: Vue 3 Direktiflerini Laravel Blade Şablonlarında Kullanma

teknomers
teknomers

Orijinal olarak recca0120.github.io‘da yayınlanmıştır

<p>Livewire kullanıcıları, API'siz, frontend/backend ayrımı olmadan, yalnızca PHP'de durum ve yöntemleri tanımlamanın keyfini biliyor. Blade şablonunuz, reaktif bir kullanıcı arayüzüne dönüşüyor. Ancak Livewire'ın frontend'i Alpine.js ile sınırlıdır. Vue ekosisteminden (Vuetify, Pinia, Vue eklentileri) yararlanmak istiyorsanız, Inertia.js'e geçmeniz gerekir. Bu da <code>.vue</code> dosyaları, props geçişi ve istemci tarafı durum yönetimi anlamına gelir.</p>

<p><a href="https://livue-laravel.com/" target="_blank" rel="noopener noreferrer">LiVue</a> bunun çözümüdür: Livewire'ın sunucu tarafı mimarisini Vue 3'e getirir. PHP durum ve mantığı yönetirken, Vue 3 DOM reaktivitesini yönetir ve Vue direktiflerini doğrudan Blade şablonlarında yazmanızı sağlar.</p>

<h2><a name="how-it-works" href="#how-it-works"></a>Nasıl Çalışır</h2>

<p>LiVue'nin istek yaşam döngüsü beş adımdan oluşur:</p>

<ol>
    <li>Bir PHP Bileşen sınıfı, genel özellikler (reaktif durum) ve genel yöntemler (çağrılabilir eylemler) tanımlar.</li>
    <li>Blade şablonları Blade sözdizimini Vue direktifleriyle (<code>v-click</code>, <code>v-model</code>, <code>v-if</code>, <code>v-for</code>) birleştirir.</li>
    <li>Laravel, sunucu tarafında tam HTML'i oluşturur; durum, sayfaya gömülmeden önce şifrelenir ve HMAC ile imzalanır.</li>
    <li>Vue 3, istemcide DOM'u besler.</li>
    <li>Kullanıcı etkileşimleri AJAX çağrılarına yol açar; sunucu bileşeni yeniden oluşturur ve DOM'u karşılaştırır.</li>
</ol>

<p>Aynı işlem içinde birden fazla sunucu çağrısı otomatik olarak tek bir HTTP isteğine toplanır ve ağda gidiş dönüşleri azaltır.</p>

<p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/livue-architecture.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/livue-architecture.png" alt="LiVue istek döngüsü mimarisi" loading="lazy" width="800" height="400"/></a></p>

<h2><a name="installation" href="#installation"></a>Kurulum</h2>

<div class="highlight js-code-highlight">
    <pre class="highlight shell"><code>composer require livue/livue

php artisan vendor:publish –tag=livue-config

<p><code>resources/js/app.js</code> dosyasına ekleyin:</p>

<div class="highlight js-code-highlight">
    <pre class="highlight javascript"><code>import LiVue from 'livue';

LiVue.start();

<p>Ayrıca Vue'nun şablon derleyicisinin yüklenebilmesi için <code>vite.config.js</code> dosyasına bu takma adı eklemelisiniz:</p>

<div class="highlight js-code-highlight">
    <pre class="highlight javascript"><code>// vite.config.js

export default defineConfig({
resolve: {
alias: {
‘vue’: ‘vue/dist/vue.esm-bundler.js’ // Bu satır kritik
}
}
});

<p>Blade düzeninize <code>@livueStyles</code> ve <code>@livueHead</code> ekleyin:</p>

<div class="highlight js-code-highlight">
    <pre class="highlight plaintext"><code>
@livueStyles
@livueHead
@vite(['resources/js/app.js'])

{!! $slot !!}  {{-- İşleme HTML içerdiğinden, kaçışsız çıktı kullanın --}}

<p>Konfigürasyonda <code>inject_assets</code> <code>true</code> olarak ayarlandığı sürece (varsayılan), bu direktifler isteğe bağlıdır.</p>

<h2><a name="first-component-counter" href="#first-component-counter"></a>İlk Bileşen: Sayaç</h2>

<div class="highlight js-code-highlight">
    <pre class="highlight shell"><code>php artisan make:livue Counter</code></pre>
</div>

<p>Bu, iki dosya oluşturur:</p>

<p><code>app/LiVue/Counter.php</code>:<br/></p>

<div class="highlight js-code-highlight">
    <pre class="highlight php"><code>namespace App\LiVue;

use LiVue\Component;

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

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

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

protected function render(): string
{
    return 'livue.counter';
}

}

<p><code>resources/views/livue/counter.blade.php</code>:<br/></p>

<div class="highlight js-code-highlight">
    <pre class="highlight plaintext"><code>


@{{ count }}

<p>Herhangi bir Blade görünümünde <code>@livue('counter')</code> veya <code><counter :count="5"/></code> ile render edebilirsiniz.</p>

<p>Zihinsel model, Livewire'a oldukça benzer: genel özellikler reaktif durumdur, genel yöntemler frontend tarafından çağrılabilir eylemlerdir. Fark, şablonların Alpine yerine Vue direktiflerini kullanmasıdır.</p>

<h2><a name="directive-quick-reference" href="#directive-quick-reference"></a>Direktif Hızlı Referansı</h2>

<p>LiVue, çoğu etkileşim senaryosunu kapsayan tam bir özel direktif seti sunar:</p>

<h3><a name="vclick-call-server-methods" href="#vclick-call-server-methods"></a>v-click: Sunucu Yöntemlerini Çağırma</h3>

<div class="highlight js-code-highlight">
    <pre class="highlight plaintext"><code><button v-click:save="">Kaydet</button>



<p>Desteklenen <code>.prevent</code>, <code>.stop</code>, <code>.once</code>, <code>.debounce</code>, <code>.throttle</code> modifikatörleridir.</p>

<h3><a name="vmodel-twoway-binding" href="#vmodel-twoway-binding"></a>v-model: İki Yönlü Bağlantı</h3>

<h3><a name="vsubmit-form-submission" href="#vsubmit-form-submission"></a>v-submit: Form Gönderimi</h3>

<div class="highlight js-code-highlight">
    <pre class="highlight plaintext"><code>

<h3><a name="vloading-ajax-loading-state" href="#vloading-ajax-loading-state"></a>v-loading: AJAX Yükleme Durumu</h3>

<div class="highlight js-code-highlight">
    <pre class="highlight plaintext"><code><p>Yükleniyor...</p>

Yükleme sonrası görünen içerik

Kaydediliyor…

İçerik alanı

<h3><a name="vpoll-auto-polling" href="#vpoll-auto-polling"></a>v-poll: Otomatik Anket</h3>

<div class="highlight js-code-highlight">
    <pre class="highlight plaintext"><code><p>
Son güncelleme: @{{ lastUpdated }}

<p>Tarayıcı sekmesi ön planda değilken otomatik olarak duraklatılır.</p>

<h3><a name="vintersect-viewport-trigger-infinite-scroll" href="#vintersect-viewport-trigger-infinite-scroll"></a>v-intersect: Görüntüleme Tetikleyici (Sonsuz Kaydırma)</h3>

<div class="highlight js-code-highlight">
    <pre class="highlight plaintext"><code><p>
<span v-loading="">Daha fazla yükleniyor...</span>

<p>Diğer direktifler arasında <code>v-navigate</code> (SPA navigasyonu), <code>v-dirty</code> (kaydedilmemiş değişiklik uyarısı), <code>v-offline</code> (çevrimdışı durumu), <code>v-sort</code> (sürükle-bırak sıralama) ve <code>v-transition</code> (Görünüm Geçişleri API'si) yer alır.</p>

<h2><a name="three-component-formats" href="#three-component-formats"></a>Üç Bileşen Formatı</h2>

<h3><a name="classbased-default" href="#classbased-default"></a> Sınıf Tabanlı (Varsayılan)</h3>

<p>Yukarıdaki Sayaç örneği: ayrı PHP sınıfı + Blade şablonu.</p>

<h3><a name="single-file-component" href="#single-file-component"></a>Tek Dosya Bileşeni</h3>

<p>PHP mantığı ve şablon aynı <code>.blade.php</code> dosyasında:<br/></p>

<div class="highlight js-code-highlight">
    <pre class="highlight plaintext"><code><?php use LiVue\Component;

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

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

};
?>

@{{ count }}

<p>Basit bileşenler için en iyi şekilde kullanılır. <code>php artisan make:livue MyComponent --single</code> ile oluşturun.</p>

<h3><a name="multi-file-component" href="#multi-file-component"></a>Çoklu Dosya Bileşeni</h3>

<p>Ayrı PHP, Blade, JS ve CSS dosyalarından oluşan bir klasör:<br/></p>

<div class="highlight js-code-highlight">
    <pre class="highlight plaintext"><code>resources/views/livue/my-widget/

├── my-widget.php # anonim sınıf
├── my-widget.blade.php # şablon
├── my-widget.js # Vue Composition API (isteğe bağlı)
└── my-widget.css # otomatik kapsamlı (isteğe bağlı)

<p>CSS, <code>data-livue-scope-{name}</code> niteliğini kullanarak otomatik olarak kapsamlanır. Müşteri tarafı JS mantığı gerektiren karmaşık bileşenler için en iyisidir.</p>

<h2><a name="page-components-fullpage-routing" href="#page-components-fullpage-routing"></a>Sayfa Bileşenleri: Tam Sayfa Yönlendirme</h2>

<p>LiVue bileşenleri, yönlendirme denetleyicisi olarak hizmet verebilir:<br/></p>

<div class="highlight js-code-highlight">
    <pre class="highlight php"><code>// routes/web.php

LiVue::route(‘/dashboard’, App\LiVue\Dashboard::class)
->name(‘dashboard’)
->middleware(‘auth’);

<div class="highlight js-code-highlight">
    <pre class="highlight php"><code>#[Layout('layouts.admin')]

[Title(‘Dashboard’)]

class Dashboard extends Component
{
protected function head(): array
{
return [
‘description’ => ‘Yönetici dashboard’,
‘og:title’ => ‘Dashboard’,
];
}
}

<p><code>description</code>, <code>robots</code>, <code>og:*</code>, <code>twitter:*</code>, <code>canonical</code>, <code>json-ld</code> ve diğer SEO ile ilgili etiketleri destekler.</p>

<h2><a name="lifecycle-hooks" href="#lifecycle-hooks"></a>Yaşam Döngüsü Kancaları</h2>

<div class="table-wrapper-paragraph">
    <table>
        <thead>
            <tr>
                <th>Kanca</th>
                <th>Zamansal Konum</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><code>boot()</code></td>
                <td>Her istekte (ilk + AJAX)</td>
            </tr>
            <tr>
                <td><code>mount(...$params)</code></td>
                <td>İlk render, props alır</td>
            </tr>
            <tr>
                <td><code>hydrate()</code></td>
                <td>AJAX isteği, durum geri yüklemeden sonra</td>
            </tr>
            <tr>
                <td><code>dehydrate()</code></td>
                <td>Durum serileştirilmeden önce</td>
            </tr>
            <tr>
                <td><code>updating($key, $value)</code></td>
                <td>Özellik güncellemelerinden önce, değeri değiştirebilir</td>
            </tr>
            <tr>
                <td><code>updated($key, $value)</code></td>
                <td>Özellik güncellemelerinden sonra</td>
            </tr>
        </tbody>
    </table>
</div>

<p>Ayrıca özel özellik versiyonları da mevcuttur, örneğin <code>updatingEmail()</code>, <code>updatedEmail()</code> gibi.<br/></p>

<div class="highlight js-code-highlight">
    <pre class="highlight php"><code>public function mount(User $user): void

{
$this->name = $user->name;
$this->email = $user->email;
}

public function updatingEmail(string $value): string
{
return strtolower(trim($value)); // Otomatik küçük harfe çevirme ve boşlukları temizleme
}

<h2><a name="php-attributes-overview" href="#php-attributes-overview"></a>PHP Özelliklerine Genel Bakış</h2>

<p>LiVue, yapılandırma için PHP 8 Özelliklerini yoğun bir şekilde kullanır:<br/></p>

<div class="highlight js-code-highlight">
    <pre class="highlight php"><code>// Özellik

[Validate(‘required|min:3’)] // Laravel doğrulama kuralları

[Url(as: ‘q’, history: true)] // URL sorgu dizisine senkronize et

[Session(key: ‘prefs’)] // Sayfalar arasında kalıcı hale getirin

[Guarded] // Şifrelenmiş, JS’ye görünmez

[Reactive] // Ebeveyn yeniden render edildikçe otomatik güncelleme

// Yöntem

[Computed] // Hesaplanan sonuçları önbelleğe al

[Confirm(‘Are you sure?’)] // Onay iletişim kutusu göster

[Renderless] // HTML yeniden render’lamayı atla

[On(‘event-name’)] // Olay dinleyici

// Sınıf

[Island] // İzole edilmiş Vue uygulaması örneği

[Lazy] // Görüntü alanına girince yükle

[TabSync] // Sekmeler arasında durumu senkronize et

<p><code>#[Url]</code> özelliği özellikle yararlıdır; arama sayfası sorguları, URL çubuğuna yansıtılır, böylece kullanıcılar arama sonuçları URL'lerini doğrudan paylaşabilir.</p>

<p><code>#[Lazy]</code> ve <code>placeholder()</code> birleştirildiğinde iskelet yükleme sağlar:<br/></p>

<div class="highlight js-code-highlight">
    <pre class="highlight php"><code>#[Lazy]

class HeavyChart extends Component
{
public function placeholder(): string
{
return ‘livue.chart-skeleton’;
}

public function mount(): void
{
    $this->data = DB::table('analytics')->get()->toArray();
}

}

<h2><a name="vue-ecosystem-integration" href="#vue-ecosystem-integration"></a>Vue Ekosistem Entegrasyonu</h2>

<p>LiVue'nın Livewire'a göre en büyük avantajı budur. Alt yapıda Vue 3 çalıştığı için, Vue eklentilerini doğrudan kullanabilirsiniz:<br/></p>

<div class="highlight js-code-highlight">
    <pre class="highlight javascript"><code>import LiVue from 'livue';

import { createVuetify } from ‘vuetify’;

const vuetify = createVuetify({
theme: { defaultTheme: ‘dark’ }
});

LiVue.setup((app) => {
app.use(vuetify);
app.component(‘MyButton’, MyButton);
app.directive(‘focus’, {
mounted(el) { el.focus(); }
});
});

LiVue.start();

<p>Pinia bulunur — yalnızca <code>import { defineStore } from 'pinia'</code> ile başlayın.</p>

<p>Client-side mantık için Blade şablonlarında <code>@script</code> kullanın:<br/></p>

<div class="highlight js-code-highlight">
    <pre class="highlight plaintext"><code>@script

import { useCartStore } from ‘./stores/cart’;
const cart = useCartStore();
livue.watch(‘count’, (val) => console.log(‘count değişti:’, val));
@endscript

<h2><a name="streaming-realtime-ai-output" href="#streaming-realtime-ai-output"></a>Streaming: Gerçek Zamanlı AI Çıkışı</h2>

<p>LiVue, NDJSON formatında yerleşik akış desteği sunar. Bu, LLM API'leriyle entegre etmek için kullanışlıdır:<br/></p>

<div class="highlight js-code-highlight">
    <pre class="highlight php"><code>class AiChat extends Component

{
use WithStreaming;

public function ask(string $question): void
{
    foreach ($stream as $chunk) {
        $this->stream(to: 'output', content: $chunk);
    }
}

}

<div class="highlight js-code-highlight">
    <pre class="highlight plaintext"><code><p>Cevap bekleniyor...</p>


<h2><a name="realtime-communication-laravel-echo-integration" href="#realtime-communication-laravel-echo-integration"></a>Gerçek Zamanlı İletişim: Laravel Echo Entegrasyonu</h2>

<div class="highlight js-code-highlight">
    <pre class="highlight php"><code>#[On('echo:orders,OrderCreated')]

public function handleNewOrder($event)
{
$this->orders[] = $event;
}

[On(‘echo-private:user.123,ProfileUpdated’)]

public function handleProfileUpdate($event)
{
$this->profile = $event[‘profile’];
}

<p>Halka açık, özel ve varlık kanallarını destekler.</p>

<h2><a name="comparison-with-livewire-and-inertia" href="#comparison-with-livewire-and-inertia"></a>Livewire ve Inertia ile Karşılaştırma</h2>

<div class="table-wrapper-paragraph">
    <table>
        <thead>
            <tr>
                <th></th>
                <th>LiVue</th>
                <th>Livewire</th>
                <th>Inertia.js</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Frontend</td>
                <td>Vue 3</td>
                <td>Alpine.js</td>
                <td>Vue/React/Svelte</td>
            </tr>
            <tr>
                <td>Şablonlar</td>
                <td>Blade + Vue direktifleri</td>
                <td>Blade + Alpine</td>
                <td>Bağımsız .vue dosyaları</td>
            </tr>
            <tr>
                <td>API Gerekir mi</td>
                <td>Hayır</td>
                <td>Hayır</td>
                <td>Hayır</td>
            </tr>
            <tr>
                <td>Vue Ekosistemi</td>
                <td>Tam destek</td>
                <td>Hayır</td>
                <td>Tam destek</td>
            </tr>
            <tr>
                <td>Durum Yönetimi</td>
                <td>Sunucu destekli</td>
                <td>Sunucu destekli</td>
                <td>Müşteri tarafında</td>
            </tr>
            <tr>
                <td>Streaming</td>
                <td>Yerleşik</td>
                <td>Hayır</td>
                <td>Hayır</td>
            </tr>
            <tr>
                <td>Adalar Mimarisi</td>
                <td>Destekleniyor</td>
                <td>Hayır</td>
                <td>Hayır</td>
            </tr>
            <tr>
                <td>Sekme Senkronizasyonu</td>
                <td>Yerleşik</td>
                <td>Hayır</td>
                <td>Hayır</td>
            </tr>
            <tr>
                <td>Olgunluk</td>
                <td>Yeni proje</td>
                <td>Olgun</td>
                <td>Olgun</td>
            </tr>
        </tbody>
    </table>
</div>

<p>Öneriler:</p>
<ul>
    <li>Vue ekosistemini kullanıyorsanız (Vuetify, Element Plus vb.) ancak tam frontend/backend ayrımına ihtiyaç duymuyorsanız → <strong>LiVue</strong></li>
    <li>Vue'ya ihtiyaç duymuyorsanız, en basit reaktif UI'ya ihtiyacınız varsa → <strong>Livewire</strong></li>
    <li>Frontend ekibi bağımsız olarak çalışıyor, tam SPA kontrolüne ihtiyaç duyuyorsa → <strong>Inertia.js</strong></li>
</ul>

<p>LiVue şu anda v1.4.8 sürümünde ve hala erken aşama bir yazılımdır. Yeni projelerde denemeye değer, ancak üretim için taahhütte bulunmadan önce olgunluğu dikkate alın.</p>

Kaynak: Orijinal Makale

Gerçek Zamanlı Teslimat Takibi Mühendisliği ile Ödeme Dönüşümlerini %20 Artırma
Laravel AI SDK Derin Analiz: AI’yi Temel Mimariye Entegre Eden İlk PHP Frameworkü – DEV Community
Laravel geliştiricileri için pratik bir frontend yol haritası
Yandex Arama API’si Üzerine: yandex-search-php PHP Kütüphanesi İncelemesi
Laravel’de N+1 Sorgu Problemini Anlama ve Düzeltme
Bu Makaleyi Paylaş
Önceki Makale Instagram Gençleri Hedeflerken Kullanımını İzliyor mu?
Sonraki Makale 2028’de Giriş Seviyesi Bilgisayarlar Tarih Olacak Analizler Başladı

Sanal Medya

Son Eklenenler

Huawei-led ekip, 1.6 trilyon parametreli DeepSeek modelini tanıttı
Donanım
Blasphemous 2 İçin Ücretsiz Heyecan Verici Yeni Genişleme Geldi
Oyun
Büyüleyici Kardeş: Vampire Survivors’a Eklenen Yeni DLC ile Yenilikler Kapıda
Oyun
Laravel ile 3 Satır Kodla WhatsApp Mesajı Gönderin
Yazılım
AION 2’nin Çıkış Tarihi Yaz Oyun Festivali’nde Duyuruldu
Oyun
OpenAI Hassas Verileri Koruma İçin Lockdown Modunu Tanıttı
Genel