Nem általános Nuxt-kurzus. Végig egyetlen ív: a cél nem „egy Nuxt app valahol”, hanem egy Nuxt app a Cloudflare Workers-en — ezért minden döntésnél az számít, hogy a végén az edge-en fog futni. Vue-alapokat feltételez, és ott áll meg magyarázni, ahol a Nuxt eltér a puszta Vue-tól.
Három működő mód — nem kell az elejétől a végéig menni ahhoz, hogy hasznod legyen belőle.
A modulok egymásra épülnek: az 1–11. adja a teljes képet a Nuxtról és a nagy architekturális döntésről, a 15–20. az éles üzemet. A lap alján lévő nyilakkal (vagy a ← → billentyűkkel) lapozhatsz.
Válassz egy ajánlott útvonalat lent, vagy keress rá a fogalomra a keresőben. Minden modul önállóan is olvasható, és hivatkozik arra, amire épít.
A 19. (buktatók katalógusa) és a 22. (konvenció-térkép) kifejezetten visszakereséshez készült; a 20. modul végén pedig egy 24 pontos indulási checklist van.
Ha nincs időd mindenre, ezek a sorrendek adják a legtöbbet a legkevesebb olvasásból. A számokra kattintva egyből a modulhoz ugrasz.
Ha azt kell eldöntened, hogy a Nitro váltsa-e ki az Express API-dat.
Amit ma Vue SPA + Express környezetben kézzel raksz össze, annak mi a Nuxt-beli megfelelője. Ez a tábla a gyors tájékozódáshoz van — a részletek, a kompromisszumok és a „mikor ne” a modulokban.
| Amit ma csinálsz | Nuxt-megfelelő | Modul |
|---|---|---|
vue-router konfig, route-tábla kézzel | fájl-alapú routing az app/pages/ alatt, nested layoutokkal | 4 |
axios a komponensben, onMounted-ben | useFetch / useAsyncData — már a szerveren lefut, nincs loading-villanás | 5 |
| Vuex/Pinia store minden globális állapotra | useState (SSR-biztos), Pinia csak ahol tényleg kell | 6 |
| Express router + controllerek | server/api/*.ts, defineEventHandler (h3) | 8 |
passport + express-session + Redis | lezárt (sealed) cookie-session, nuxt-auth-utils | 10 |
| ORM közvetlen connection stringgel | bindings: Hyperdrive a meglévő Postgres elé, vagy D1 | 11 |
cors, helmet csomagok | h3 utils + routeRules (cors, headers) | 7, 8 |
| Vite/Webpack konfig kézzel | nuxt.config.ts + modulok (Vite 8 fut alatta) | 12, 13 |
index.html, meta tagek, sitemap kézzel | useSeoMeta / useHead — szerveroldalon renderelve | 20 |
.env + process.env mindenhol | runtimeConfig, és Workers-en bindings + secrets | 12, 19 |
nodemon + külön frontend dev-szerver | egy nuxt dev, HMR-rel — lokálisan is valódi bindingokkal | 18 |
| nginx + PM2 + statikus mappa + CDN | egyetlen Workers-deploy: SSR és a statikus assetek együtt | 17 |
Mind a 22 modul és a tematika, olvasási sorrendben. Kereshetsz cím vagy fogalom alapján is — próbáld: hydration, useFetch, routeRules, session, bundle.
Mit tartalmaz a tananyag, és hova illeszkedik a mostani stacked.
A teljes ív egy lapon: mit tanulsz, milyen sorrendben, és mi a Nuxt-megfelelője annak, amit ma Vue SPA + Express környezetben kézzel raksz össze.
A döntés megalapozása és a mentális modell. Innen indul minden.
A tényleges összevetés Vue SPA + Express-szel: mit ad hozzá az SSR, a fájl-alapú routing és a beépített szerver — és mit veszítesz cserébe. Végül: miért illik a Nuxt kifejezetten jól a Workers-hez.
A három futásidő szétválasztása (build-time, szerver, kliens) — ez az a modell, ami nélkül minden SSR-hiba érthetetlen marad. A build négy fázisa, a .output/ felépítése, Nitro-presetek.
Amit tudsz, megmarad — de hét ponton máshogy kell gondolkodni: auto-import és amikor visszaharap, useState vs. ref, composable-kontextus, definePageMeta, és a hidratálási eltérés hét oka.
Routing, adat, állapot, renderelés — a napi munka gerince.
Fájl→útvonal teljes leképezés dinamikus, opcionális és catch-all szegmensekkel. A négyféle „middleware” és hogy melyik véd tényleg — plusz multitenant útvonaltervezés wildcard-tanúsítvánnyal.
Három eszköz, három szerep: useFetch, useAsyncData, $fetch. A dupla lekérés anatómiája, kulcsok és reaktív kulcsok, hibakezelés, párhuzamosítás — és a payload-csapda.
Hova tartozik az adat, és miért látja egyik felhasználó a másikét: a kereszt-kérés állapotszivárgás teljes anatómiája, három rejtekhelyével. Pinia mérlege, useCookie, URL mint állapot.
Négy mód, egy döntési térkép, és a teljes routeRules-referencia. Külön szakasz arról, hogyan viselkedik valójában az isr/swr Workers-en — és mit kell hozzá KV-re kötni.
Nitro, h3, és a nagy architekturális döntés.
22 soros Express→h3 leképezési tábla, az event-objektum felépítése, validáció, hibakezelés. A server middleware return-csapdája, és három minta: nyers body, R2-feltöltés, stream.
Három architektúra, hét szempont, és a latency-paradoxon: miért lehet lassabb az edge, ha a BFF-ed messze van az API-tól. Migrációs sorrend és checklist a döntéshez.
Miért nem megy az express-session és a passport, és mi jön helyette: lezárt süti-session négy stratégiával, a nuxt-auth-utils teljes folyamattal. Jelszókezelés Workers-en 2026-ban.
Bindingok elérése és típusozása, Drizzle a gyakorlatban nyolc szakaszban, ORM-választás — és a működő TypeORM-recept Workers-en, egy éles projekt alapján. Séma, migráció, tranzakció, tenant-szűrés.
Konfiguráció, ökoszisztéma, teljesítmény, tesztelés.
A négy szint szétválasztása: build-time konstans, runtime-konfig, környezeti változó, binding. A runtimeConfig publikus ágának szivárgás-anatómiája, és egy grep-es ellenőrzés.
Négy kérdés, amivel öt perc alatt eldöntöd, hogy egy modul futni fog-e Workers-en. Kurált, háromszintű lista, a @nuxt/image Cloudflare-providerei, és saját modul @nuxt/kit-tel.
Layer vs. modul, a feloldási sorrend pontosan, merge-vs-override. A white-label döntés: futásidejű témázás vagy réteg tenantonként — és mikor ne rétegezz.
Három front — hálózat, kliens-CPU, szerver-CPU —, és mind más eszközzel javul. Késleltetett hidratálás mind a hét stratégiával, a Workers bundle-limit méréssel, hidegindítás és a CPU-idő mint számlatétel.
A négy tesztréteg — és a workerd-rés: minden Node-ban fut, tehát pont a Workers-hibákat nem látja. Két áthidalás, plusz DevTools, wrangler tail, Workers Logs és a source map-lánc.
Ahol a Nuxt-tudás és a platform találkozik.
A .output/ két fele és a kérés útja: asset előbb, Worker utána — az egyik ingyenes és korlátlan. Teljes wrangler.jsonc soronként, verzió-alapú kigördítés, preview URL-ek, Smart Placement.
Hűségi létra hat fokban a nuxt dev-től az élesig. Lokális adat és seedelés, .dev.vars, getPlatformProxy, és a bindingonként bekapcsolható távoli mód.
Katalógus visszalapozásra: hat gyökérok, köztük hogy az óra áll — a Date.now() nem halad futás közben. Tünet→ok kereszttábla és a könyvtárak, amik elbuknak.
Négy kérdés a kiadás előtt. SEO-minimum és OG-kép WASM-mal, i18n-stratégia amit később nem cserélsz, háromrétegű cache — és a legdrágább hiba: hitelesített oldal megosztott cache-ben.
Az átállás terve és egy visszakereshető referencia.
Fojtófüge-minta Cloudflare-en: a Worker kapuként áll a régi rendszer elé, és útvonalanként veszi át. Öt visszavonható fázis, session-híd felolvasáskori átemeléssel, és amit nem érdemes migrálni.
Nem olvasásra, hanem visszakeresésre: könyvtárszerkezet, fájlnév-konvenciók, auto-import szabályok, composable- és komponens-táblák, h3-segédfüggvények, routeRules, parancsok, és a „melyik kódom hol fut” zárótábla.