Nuxt 4 layout: data, pages, and server boundaries

Nuxt 4 rewards folders that mirror how you think about the product. I keep marketing pages thin, push reusable logic into composables, and treat server routes as optional adapters — not the source of truth.

Data lives in app/data

Projects, case studies, and blog posts are typed modules imported directly. That means zero network waterfall on navigation and predictable builds on Netlify.

Pages orchestrate, components render

index.vue composes hero, stats, and teasers. Detail routes validate slugs and redirect when missing. SEO meta stays next to the page that owns the content.

useSeoMeta({
  title: `${post.title} — Amir Maghami`,
  description: post.excerpt,
});

• Pinia for CV-style editable state; static data for portfolio content.
• ClientOnly for canvas, cursor, and scroll plugins.
• icon.clientBundle.scan for offline icon sets in production.