Routing, layoutok, middleware

4.1A fájl → route leképezés, teljesen

A app/pages/ alatti szerkezet közvetlenül fordul route-táblává. A teljes szabályrendszer nem nagy, és érdemes egyszerre látni:

app/pages/
  index.vue                      →  /
  about.vue                      →  /about
  projects/index.vue             →  /projects
  projects/[id].vue              →  /projects/:id          (kötelező paraméter)
  projects/[id]/settings.vue     →  /projects/:id/settings
  blog/[[slug]].vue              →  /blog  ÉS  /blog/:slug   (opcionális)
  docs/[...slug].vue             →  /docs/*  — a slug TÖMB lesz
  (marketing)/pricing.vue        →  /pricing  — a zárójeles mappa nem látszik az URL-ben
  settings.vue        ┐          →  /settings  szülő, benne <NuxtPage />
  settings/           │
    index.vue         ├─ egyben  →  /settings
    billing.vue       ┘          →  /settings/billing  (a szülőn belül renderel)

Négy dolog, ami elsőre nem magától értetődő:

• A paraméter mindig string. route.params.id soha nem szám, akkor sem, ha annak néz ki. Ha számot vársz, konvertálj és validálj (mindjárt jön a validate).
• A catch-all tömböt ad. [...slug].vue esetén a /docs/a/b/c-ből ['a','b','c'] lesz, nem 'a/b/c'.
• Route groups. A (marketing)/ mappa csoportosít, de nem jelenik meg az URL-ben. Arra jó, hogy a publikus oldalaid egy helyen legyenek, közös layouttal, anélkül hogy prefixet kapnának.
• Nested route-hoz szülőfájl kell. Egy settings/ mappa mellé settings.vue — és abban egy <NuxtPage />, ahova a gyerek renderel. Enélkül a gyerekek testvér-route-ok lesznek, nem beágyazottak.

Felülírás és validálás definePageMeta-val

<script setup lang="ts">
definePageMeta({
  layout: 'app',
  middleware: ['auth', 'tenant'],       // ebben a sorrendben futnak
  alias: ['/p/:id'],                    // régi URL életben tartása

  // ha nem illik a minta, a route ELDOBÓDIK → 404, még mielőtt renderelnénk
  validate: (route) => /^\d+$/.test(route.params.id as string),
})
</script>

A validate alulértékelt: ezzel intézed el a „/projects/abc nem létező azonosító” esetet anélkül, hogy lefutna az adatlekérés és a renderelés. Multitenantnál különösen hasznos — a rosszul formázott tenant-slugokat itt szűröd ki.

4.2Navigáció: <NuxtLink> és navigateTo

<template>
  <!-- alapból prefetchel, amikor a link a nézetbe kerül -->
  <NuxtLink to="/projects">Projektek</NuxtLink>

  <!-- listákban érdemes visszafogni: interakcióra, ne láthatóságra -->
  <NuxtLink :to="`/projects/${p.id}`" :prefetch-on="{ interaction: true }">
    {{ p.name }}
  </NuxtLink>

  <!-- külső link: felismeri, és nem kliensoldali navigációt csinál -->
  <NuxtLink to="https://developers.cloudflare.com" target="_blank">Dokumentáció</NuxtLink>
</template>

Programozott navigációra navigateTo-t használj, ne router.push-t — mert ez a szerveren is működik:

await navigateTo('/projects')                              // normál navigáció
await navigateTo('/login', { replace: true })            // nincs vissza-gomb
await navigateTo('/login', { redirectCode: 303 })         // SSR alatt valódi HTTP-átirányítás
await navigateTo('https://billing.example.com', { external: true })

4.3Layoutok

A layout egy komponens egy <slot />-tal, ahova az oldal renderel:

<!-- app/layouts/default.vue -->
<template>
  <div class="shell">
    <AppHeader />
    <main><slot /></main>
    <AppFooter />
  </div>
</template>

<!-- app/app.vue — a gyökér -->
<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>

Oldalanként a definePageMeta({ layout: 'admin' }) választ; futásidőben a setPageLayout('admin') vált (emlékeztető a 3. modulból: a makró nem lát változót). A 4.5-ös useLayout() composable-lel pedig kiolvashatod és állíthatod az aktuális layoutot reaktívan — ez korábban körülményesebb volt.

Ha egy oldal semmilyen keretet nem akar (például egy nyomtatási nézet vagy egy beágyazható widget): definePageMeta({ layout: false }).

Named views (4.5)

Ha egy szülő-oldalnak több kimenete van (például egy fő tartalom és egy oldalsáv, amit a gyerek route tölt fel), a gyerek@nezet.vue névkonvencióval és több <NuxtPage name="…" />-dzsel megoldható. Ritkán kell, de amikor kell, jó tudni, hogy létezik — korábban erre kényszerű trükközés volt a válasz.

4.4Middleware — négy fajta, és csak egy közülük biztonsági

Ez a szakasz a modul másik fontos része. Négy különböző dolgot hívnak „middleware”-nek Nuxtban, és összekeverni őket költséges:

Az első három ugyanaz az eszköz, csak másképp aktiválva. Mindhárom a Vue-router szintjén fut: az első, szerveroldali kérésnél a szerveren, utána viszont minden kliensoldali navigációnál a böngészőben. Ezért nem lehet rájuk bízni a védelmet.

// app/middleware/auth.ts — UI-szintű terelés, nem védelem
export default defineNuxtRouteMiddleware((to) => {
  const { loggedIn } = useUserSession()
  if (!loggedIn.value) {
    return navigateTo(`/login?next=${encodeURIComponent(to.fullPath)}`)
  }
  // abortNavigation('Nincs jogosultság')  → hibaoldal, navigáció nélkül
})

// server/middleware/tenant.ts — EZ fut minden kérésnél, a szerveren
export default defineEventHandler(async (event) => {
  const host   = getRequestHost(event)
  const tenant = await resolveTenant(event, host)      // server/utils/

  // a kérés kontextusába tesszük — innen látja minden server route és az SSR
  event.context.tenant = tenant
})

4.5Multitenant útvonaltervezés

Most jön az a döntés, amit később drágán lehet visszacsinálni, mert a felhasználók URL-jeibe, könyvjelzőibe és a Google indexébe beépül. Három modell van:

A négy dolog, ami a döntést eldönti

Az implementáció: egy helyen oldd fel

Bármelyik modellt választod, a tenant feloldása egyetlen szerver middleware dolga legyen, és onnan terjedjen tovább:

// server/middleware/tenant.ts
export default defineEventHandler(async (event) => {
  const url  = getRequestURL(event)
  const host = url.hostname

  let slug: string | null = null

  // ② aldomain:  acme.pelda.hu
  if (host.endsWith('.pelda.hu') && host !== 'app.pelda.hu') {
    slug = host.replace('.pelda.hu', '')
  }
  // ① útvonal-prefix:  /t/acme/…
  else if (url.pathname.startsWith('/t/')) {
    slug = url.pathname.split('/')[2] ?? null
  }
  // ③ egyedi domain:  app.acme.hu → DB-lookup (érdemes cache-elni, 18. modul)
  else {
    slug = await lookupCustomDomain(event, host)
  }

  if (slug) {
    const tenant = await loadTenant(event, slug)
    if (!tenant) throw createError({ statusCode: 404, statusMessage: 'Ismeretlen munkaterület' })
    event.context.tenant = tenant       // innen látja minden server route ÉS az SSR
  }
})

A kliensoldal ugyanezt az egy forrást kapja meg — nem oldja fel újra:

// server/api/bootstrap.get.ts — publikus tenant-adatok (arculat, funkciók)
export default defineEventHandler((event) => {
  const t = event.context.tenant
  return t ? { slug: t.slug, name: t.name, theme: t.theme } : null
})

// app/composables/useTenant.ts
export const useTenant = () => useState<PublicTenant | null>('tenant', () => null)

Két csapda, ami csak élesben derül ki

• Cookie-hatókör. Ha aldomain-modellben a session-cookie-t .pelda.hu-ra sütöd, akkor az minden tenant aldomainjére elmegy — ezzel eldobtad az izoláció fő hasznát. Ha viszont aldomainenként sütsz, akkor a tenantváltásnál újra be kell jelentkezni (vagy egy központi SSO-lépés kell). Ez tudatos döntés, nem véletlen: a 10. modulban végigvesszük mindkét felállást.
• Cache-kulcs. Aldomain- és egyedi domain-modellben ugyanaz az útvonal (/dashboard) különböző tenanthoz tartozik. Ha a cache csak az útvonalat nézi, az egyik tenant oldalát szolgálod ki a másiknak. A hoszt része kell hogy legyen a kulcsnak. A 18. modul erről szól, de a tervezésnél már most tudni kell.

4.6Hibaoldal és 404

Két külön dolog, és gyakran keverednek:

// bármelyik server route-ban vagy setup-ban:
throw createError({ statusCode: 404, statusMessage: 'Nincs ilyen projekt', fatal: true })

<!-- app/error.vue — a gyökérben, NEM layout, NEM a pages alatt -->
<script setup lang="ts">
const props = defineProps<{ error: { statusCode: number, statusMessage?: string } }>()
</script>

<template>
  <div class="err">
    <h1>{{ error.statusCode }}</h1>
    <p>{{ error.statusMessage }}</p>
    <button @click="clearError({ redirect: '/' })">Vissza a főoldalra</button>
  </div>
</template>

4.7Buktatók, amikbe mindenki belefut

• Nincs pages/ mappa → nincs routing. Ha csak app.vue van, a Nuxt SPA-módban, egyetlen oldalként fut, és a <NuxtPage /> nem csinál semmit. Az első pages/index.vue létrehozásakor „kapcsol be” a router.
• Trailing slash. A /projects és a /projects/ alapból két különböző URL a cache szempontjából. Válassz egy formát, és a másikat irányítsd át — Cloudflare-en ezt szabállyal is megteheted, a Worker előtt (Cloudflare-anyag 21. modul).
• Nested route szülőfájl nélkül. Ha van settings/ mappád, de nincs settings.vue-d, akkor nincs beágyazás — csak testvér-route-ok. A „miért nem marad meg a fül-sáv navigációkor” kérdés jellemzően ez.
• Középső middleware-ben elfelejtett return. A navigateTo route middleware-ben csak akkor irányít át, ha visszaadod (return navigateTo(…)). Enélkül lefut, de a navigáció folytatódik.
• Globális middleware minden kérésen. Az *.global.ts tényleg minden navigációnál fut, beleértve a publikus marketing-oldalakat is. Ha DB-t hívsz benne, azt minden oldalletöltés megfizeti.

4.8Ellenőrizd magad