Nuxt.js

Nuxt.js

Performant, SEO‑strong frontends with Nuxt.

Nuxt.js is my framework of choice for high‑performance, SEO‑friendly frontends with Vue.
Whether classic website, headless storefront or large web app: Nuxt combines DX, performance and flexibility (SSR/SSG/ISR) in a solid toolkit.


Why Nuxt?

Nuxt adds everything modern web projects need:

  • Rendering modes: SSR, SSG and ISR — matched to SEO, speed and scale.
  • File‑based structure: Routing, layouts, middleware, server APIs — clear and maintainable.
  • Nitro server: Server functions/endpoints (/server/api/*) without a separate backend, adapters for Node/Serverless/Edge.
  • DX‑focused: TypeScript, Vite, auto‑imports, composables, modular ecosystem.

Architecture & best practices

  • Pages & layouts: Clean IA with global and per‑page layouts.
  • Composables: Shared logic (data fetching, formatting, state) in /composables.
  • Server APIs: Lightweight BFF layer for auth, proxying, normalisation.
  • Data fetching: useAsyncData()/useFetch() with caching, error and loading states.
  • Middleware: Access control, feature flags, A/B routing.
  • State: Pinia for typed global state (users, cart, permissions).

Performance & SEO

  • SSR/SSG/ISR for fast TTFB and indexable content.
  • Code‑splitting & lazy loading to minimise bundles.
  • Image optimisation with @nuxt/image.
  • Meta/OG/Twitter via useSeoMeta() and head management.
  • Route rules & caching: Fine‑grained control (SWR, headers).

Internationalisation (i18n)

  • nuxt‑i18n with a clean URL strategy (/de, /en, /ru), keys, fallbacks.
  • Locale‑specific SEO (hreflang), date/number formatting, currency display.
  • Integrated in routing, middleware and head tags.

Headless & integrations

  • Shopware 6: Catalogue, cart, checkout, CMS mapping.
  • WordPress (REST/GraphQL): Blog/pages as headless source.
  • Laravel backends: Auth, policies/permissions, jobs/queues — Nuxt as the frontend layer.
  • Third‑party APIs: DeepL, payments, ERP/PIM, search.

Security

  • Auth flows: Session/JWT, CSRF, refresh tokens, HTTP‑only cookies.
  • Headers & policies: CSP, HSTS, SRI, referrer policy.
  • Rate limiting & bot protection on Nitro endpoints.
  • Input validation & sanitising on server and client.

Quality, tests & CI/CD

  • TypeScript‑first, ESLint, Prettier.
  • Unit/Component tests (Vitest) & E2E (Playwright/Cypress).
  • CI pipelines (build, lint, test, previews), preview links for reviews.
  • Observability: Logging, Sentry, Web‑Vitals, RUM.

Services with Nuxt

  • Architecture (SSR/SSG/ISR, SEO, i18n, security).
  • Implementation of components, pages, routes, middleware, server APIs.
  • Headless frontends for Shopware/WordPress/Laravel incl. auth and data model.
  • Performance tuning (bundle analysis, caching, image pipelines, edge).
  • Migrations (SPA → Nuxt, legacy → modern), refactoring & coaching.

Example projects

  • Headless storefront (Shopware 6 + Nuxt)
    Listing, search, PDP, cart/checkout, account; SSR + image optimisation; i18n/multi‑currency.
  • Content hub (WordPress headless + Nuxt)
    Blog/pages via REST, SSG + ISR, SEO rich snippets, editorial workflows.
  • SaaS dashboard (Laravel API + Nuxt)
    Auth/permissions, real‑time KPIs, uploads, queue status, granular caches.

Modules & tools I often use

  • nuxt‑i18n, @nuxt/image, @nuxt/content, @pinia/nuxt
  • UI libraries (Nuxt UI / Tailwind)
  • Security/Headers, Sentry, Unhead
  • Vite plugins (analyser, legacy, compression)

Deployment & hosting

  • Node adapter (Docker/K8s), serverless/edge (Vercel/Netlify) via Nitro adapters.
  • CDN integration (caching, ISR, images), zero‑downtime deployments.
  • Env management & secrets, staging/preview environments.

Conclusion

With Nuxt I build fast, secure and scalable frontends — ideal for SEO‑focused sites, headless shops and enterprise web apps.