Layers: kód-újrafelhasználás és white-label

14.1Mi az a layer?

Egy layer maga is egy Nuxt-projekt: van app/-ja, server/-e, nuxt.config.ts-e. A különbség csak annyi, hogy nem önmagában futtatod, hanem egy másik projekt kiterjeszti:

// a márka-projekt nuxt.config.ts-e
export default defineNuxtConfig({
  extends: [
    '../base',                        // lokális könyvtár
    '@acme/nuxt-base',                 // npm-csomag
    'github:acme/nuxt-base#v2',        // távoli git (giget)
  ],
})

Innentől a base layer minden oldala, komponense, composable-je és server route-ja úgy viselkedik, mintha a te projektedben lenne — de bármelyiket felülírhatod azzal, hogy létrehozod ugyanazt a fájlt nálad.

Layer vagy modul?

14.2A feloldási sorrend — a legfontosabb szabály

Amikor több helyen létezik ugyanaz a fájl, ez a prioritási sorrend dönt (fentről lefelé csökkenő erősséggel):

Mi olvad össze és mi íródik felül

Hivatkozás a layerre

// a layerek srcDir-jére automatikus alias készül
import BaseButton from '#layers/base/components/Button.vue'

// hasznos, ha felülírsz, de az eredetit is használni akarod:
<script setup>
import BaseHeader from '#layers/base/components/AppHeader.vue'
</script>
<template>
  <div class="brand-bar"><BrandLogo /></div>
  <BaseHeader />          <!-- nem másoltuk, csak kiegészítettük -->
</template>

14.3A white-label kérdés — ez a modul lényege

Multitenant SaaS-nál előbb-utóbb jön az igény: „a mi ügyfeleink a saját logónkkal lássák”. A layers erre kézenfekvő eszköznek tűnik — de a legtöbb esetben nem az a helyes válasz. A döntés egyetlen kérdésen múlik:

Build-időben ismered a tenantokat, vagy futásidőben?

A futásidejű út — ezzel indulj

// server/api/bootstrap.get.ts — a tenant publikus arculata (4. modul)
export default defineEventHandler((event) => {
  const t = event.context.tenant
  return t && {
    slug: t.slug, name: t.name, logoUrl: t.logoUrl,
    theme:    t.theme,                // { primary: '#0b7285', radius: '10px', … }
    features: t.features,             // { exportPdf: true, sso: false, … }
  }
})

<!-- app/layouts/default.vue — a téma CSS-változókká válik -->
<script setup lang="ts">
const tenant = useTenant()

const themeVars = computed(() => ({
  '--brand-primary': tenant.value?.theme.primary ?? '#00b96b',
  '--brand-radius':  tenant.value?.theme.radius  ?? '8px',
}))
</script>

<template>
  <div :style="themeVars">
    <AppHeader :logo="tenant?.logoUrl" />
    <slot />
  </div>
</template>

// és a funkció-kapcsolók ugyanabból a forrásból
export const useFeature = (name: FeatureKey) => {
  const tenant = useTenant()
  return computed(() => tenant.value?.features?.[name] === true)
}

Mikor van mégis szükség layerre

Akkor, amikor a különbség nem arculati, hanem funkcionális, és nem lehet feature flaggel lefedni:

• Egy nagy ügyfélnek saját onboarding-folyamata van, öt egyedi oldallal.
• Egy piac külön jogszabályi űrlapokat és validációt igényel.
• Van egy „enterprise” kiadásod, ami érdemben más képernyőkből áll.

repo/
├─ layers/
│  └─ base/                 ← minden közös: app/, server/, komponensek
├─ apps/
│  ├─ saas/                 ← a fő, sokbérlős alkalmazás (futásidejű témázással)
│  │  └─ nuxt.config.ts        extends: ['../../layers/base']
│  └─ acme-enterprise/      ← EGY nagy ügyfél saját kiadása
│     ├─ app/pages/onboarding/…   ← felülírja a base-ét
│     └─ nuxt.config.ts        extends: ['../../layers/base']

14.4Amire a layer tényleg jó, tenantoktól függetlenül

• Közös alap több termékhez. Ha van egy fő appod, egy admin-felületed és egy publikus portálod, a közös auth, layout, design-rendszer és server/utils egy base layerbe kerülhet.
• Design-rendszer csomagként. Komponensek + CSS-változók + Tailwind-preset egy layerben, npm-csomagként verziózva.
• Sablon új projekthez. Ahelyett, hogy másolnál egy régi repót, kiterjesztesz egy layert — és a javítások visszafelé is terjednek.
• A monolit szétbontása. Ha a Nuxt-projekted túl nagy lett, a domain-ek külön layerekbe emelhetők anélkül, hogy külön deployt jelentenének.

14.5Buktatók

14.6Mikor ne layer

• Ha csak témázásról van szó. CSS-változó és egy tenant-rekord elég — nem kell hozzá build-idejű mechanizmus.
• Ha egy komponens tér el. Arra props és slot van; a layer ehhez nagyágyú.
• Ha még csak egy projekted van. A layer akkor kezd értéket adni, amikor legalább kettő fogyasztója van. Előre kiemelni annyi, mint absztrakciót tervezni egyetlen példa alapján.
• Ha a különbség szerveroldali üzleti logika. Az inkább feature flag vagy stratégia-minta a service-rétegben (8. modul), mint fájl-felülírás.

14.7Ellenőrizd magad