Nuxt.js ist mein Framework der Wahl für leistungsstarke, SEO-freundliche Frontends auf Basis von Vue.
Ob klassische Website, Headless-Storefront oder große Web-App: Nuxt kombiniert Developer Experience, Performance und Flexibilität (SSR/SSG/ISR) in einem soliden Baukasten.
Warum Nuxt?
Nuxt erweitert Vue um alles, was moderne Web-Projekte brauchen:
- Rendering-Modi: SSR (Server-Side Rendering), SSG (Static Site Generation) & ISR (Incremental Static Regeneration) – genau passend für SEO, Geschwindigkeit und Skalierbarkeit.
- Dateibasierte Struktur: Routing, Layouts, Middleware, Server-APIs – klar, konventionell, wartbar.
- Nitro-Server: Serverfunktionen/Endpoints (
/server/api/*
) ohne separaten Backend-Stack, optional mit Adaptern (Node, Serverless, Edge). - Starker DX-Fokus: TypeScript, Vite, Auto-Imports, Composables, modulare Erweiterungen.
Architektur & Best Practices
- Pages & Layouts: Saubere Informationsarchitektur mit globalen + seitenbezogenen Layouts.
- Composables: Geteilte Logik (Datenabfragen, Formatierung, State) in
/composables
. - Server-APIs: Leichtgewichtige BFF-Schicht (Backend-for-Frontend) für Auth, Proxying, Normalisierung.
- Datenbeschaffung:
useAsyncData()
/useFetch()
mit Caching, Fehler- und Ladezuständen. - Middleware: Zugriffsschutz, Feature-Flags, A/B-Routing – zentral und testbar.
- State: Pinia für globalen, typisierten Zustand (z. B. Benutzer, Warenkorb, Berechtigungen).
Performance & SEO
- SSR/SSG/ISR für schnelle TTFB und indexierbare Inhalte.
- Code-Splitting & Lazy Loading für minimale Bundle-Größen.
- Bilder-Optimierung mit
@nuxt/image
(responsive, Formate, Größen). - Meta/OG/Twitter via
useSeoMeta()
& Head-Management (strukturierte Daten optional). - Route Rules & Caching: Feinkonfiguration je Route (stale-while-revalidate, headers).
Internationalisierung (i18n)
- nuxt-i18n mit sauberer URL-Strategie (z. B.
/de
,/en
,/ru
), Übersetzungs-Keys, Fallbacks. - Locale-spezifische SEO (hreflang), Datum/Zahl-Formatierung, Währungsdarstellung.
- Integriert in Routing, Middlewares und Head-Tags.
Headless & Integrationen
- Shopware 6 (Store-API/Admin-API): Katalog, Warenkorb, Checkout, Erlebniswelten-Mapping.
- WordPress (REST/GraphQL): Blog/Seiten als Headless-Quelle.
- Laravel Backends: Auth, Policies/Permissions, Jobs/Queues – Nuxt als Frontend-Schicht.
- Drittanbieter-APIs (DeepL, Payment, ERP/PIM, Search): Kapselung in Composables/Server-Endpoints.
Sicherheit
- Auth-Flows: Session/JWT, CSRF-Schutz, Refresh-Tokens, HTTP-only Cookies.
- Headers & Policies: CSP, HSTS, SRI, Referrer-Policy; harte Defaults über Module.
- Rate Limiting & Bot-Protection auf Nitro-Endpoints.
- Input-Validierung & Sanitizing server- und clientseitig.
Qualität, Tests & CI/CD
- TypeScript-first, ESLint, Prettier, Commit-Konventionen.
- Unit/Component-Tests (Vitest) & E2E (Playwright/Cypress).
- CI-Pipelines (Build, Lint, Test, Preview Deploys), Preview-Links für Reviews.
- Observability: Logging, Sentry, Web-Vitals, Real-User-Monitoring.
Meine Leistungen mit Nuxt
- Konzeption & Architektur (SSR/SSG/ISR-Strategie, SEO, i18n, Security).
- Implementierung von Komponenten, Seiten, Routen, Middlewares, Server-APIs.
- Headless-Frontends für Shopware/WordPress/Laravel inkl. Auth und Datenmodell.
- Performance-Tuning (Bundle-Analyse, Caching, Bild-Pipelines, Edge-Delivery).
- Migrationen (SPA → Nuxt, Legacy → moderne Struktur), Refactoring & Coaching.
Beispielprojekte
- Headless-Storefront (Shopware 6 + Nuxt)
Produktlisting, Suche, PDP, Warenkorb/Checkout, Kundenzone; SSR + Image-Optimierung; i18n/Mehrwährung. - Content-Hub (WordPress Headless + Nuxt)
Blog/Seiten via REST, SSG + ISR, SEO-Rich-Snippets, Redaktions-Workflows. - SaaS-Dashboard (Laravel API + Nuxt)
Auth/Permissions, Echtzeit-KPIs, File-Uploads, Warteschlangen-Status, granulare Caches.
Häufig genutzte Module & Tools
- nuxt-i18n, @nuxt/image, @nuxt/content, @pinia/nuxt
- UI-Libraries (z. B. Nuxt UI / Tailwind)
- Security/Headers, Sentry, Unhead
- Vite Plugins (Analyzer, Legacy, Compression)
Deployment & Hosting
- Node Adapter (Docker/K8s), Serverless/Edge (Vercel/Netlify) mit Nitro-Adaptern.
- CDN-Integration (Caching, ISR, Images), Zero-Downtime-Deployments.
- Env-Management & Secrets, Staging/Preview-Umgebungen.
Fazit
Mit Nuxt baue ich schnelle, sichere und skalierbare Frontends, die sowohl inhaltlich als auch technisch überzeugen – ideal für SEO-starke Websites, Headless-Shops und Enterprise-Web-Apps.