Çok Kiracılı Laravel SaaS için Inertia v2 ile Üretim Vue Arayüzü Oluşturma

Vue ve Laravel ile oluşturulan yerel uygulamalar genellikle “İşte Inertia ile bir sayfayı nasıl render edeceksiniz” aşamasında kalıyor. Ancak gerçek SaaS uygulamaları, kullanıcı türüne göre dinamik düzenlere, overlay yönetimine, filtre durumunu koruyan sayfalama sistemlerine ve tüm bunları tam bir durum yönetim kütüphanesi karmaşıklığı olmadan sağlamalıdır.

<p>Kohana.io için tam bir ön uç modülü geliştirdim - bir üretim CRM/ERP'si - ve bunu Laravel için açık kaynak bir SaaS çerçevesine olan <strong>LaraFoundry</strong>ye aktarıyorum.</p>

<p>Bu yazı, tam ön uç mimarisini kapsamaktadır: düzen değişimi, overlay sistemi, sayfalama + filtreler, modal desenleri, Inertia bağlantıları ve test işlemleri.</p>

<h2>
  <a name="the-problem" href="#the-problem"></a> Problem
</h2>

<p>Çok kiracılı bir SaaS uygulaması birden fazla düzen gerektirir. Kohana.io için beş düzen gereklidir:</p>

<div class="table-wrapper-paragraph">
    <table>
        <thead>
            <tr>
                <th>Düzen</th>
                <th>Ne zaman</th>
                <th>İçerikleri</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>GuestLayout</td>
                <td>Giriş yapılmamış</td>
                <td>Landing page, giriş/kayıt modalları</td>
            </tr>
            <tr>
                <td>AuthLayout</td>
                <td>Normal kullanıcı</td>
                <td>Tam uygulama: başlık, menüler, bildirimler</td>
            </tr>
            <tr>
                <td>AdminLayout</td>
                <td>Admin kullanıcı</td>
                <td>Farklı navigasyona sahip admin paneli</td>
            </tr>
            <tr>
                <td>AuthBlockedLayout</td>
                <td>Engellenmiş hesap</td>
                <td>Sınırlı erişim, destek talepleri</td>
            </tr>
            <tr>
                <td>AuthDeletedLayout</td>
                <td>Silinmiş hesap</td>
                <td>Veri talepleri için minimal UI</td>
            </tr>
        </tbody>
    </table>
</div>

<p>Her düzen tamamen farklı bir bileşen ağacına sahiptir. Farklı başlıklar, farklı menüler ve farklı modal sistemleri. Inertia'nın sürekli düzenleri, sayfa gezintileri boyunca sabit kalır - sadece bir CSS sınıfını değiştiremezsiniz.</p>

<h2>
  <a name="architecture-overview" href="#architecture-overview"></a> Mimari Genel Bakış
</h2>

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


HTTP Request
|
v
HandleInertiaRequests middleware
|── visitor_status: 'admin' | 'auth' | 'authBlocked' | 'authDeleted' | 'guest'
|── layout: { layoutData, authUserData } (lazy-loaded)
|── flash, translations, ziggy, locale, ui_settings
|
v
app.js - createInertiaApp()
|── import.meta.glob('./pages/*/.vue') → code-split pages
|── page.layout = page.layout || LayoutSwitcher → default layout
|── i18n, ZiggyVue, Head, Link → plugins
|
v
LayoutSwitcher.vue
|── reads visitor_status from Inertia props
|── renders matching layout component
|
v
AuthLayout / AdminLayout / GuestLayout / etc.
|── pullout menus, overlays, modals
|── → page content