Tous les articles
Plateformes··9 min de lecture

Why We Chose Nuxt 4 for AI Products in 2026

After shipping seven AI products, here's the architecture we converged on — Nuxt 4 + Fastify + MongoDB — and why it beats Next.js, Astro, and SvelteKit for our use case.

Frédéric Magnin
Founder & AI Engineer at Ikki
Why We Chose Nuxt 4 for AI Products in 2026

The honest pitch

Most "framework comparison" articles are written by framework maintainers or by teams who shipped one project. This one is written after shipping seven AI products in 24 months, with a team of 3–5 engineers, on a stack we picked, broke, fixed, and stuck with.

Spoiler: we ship on Nuxt 4 + Fastify + MongoDB. The interesting part is why — and where this stack falls short.

What we needed

Across our seven products — voice agents, RAG platforms, fintech engines, civic AI, immersive web, multi-tenant SaaS — the technical requirements converged:

  • Server-side rendering for SEO (we live and die by organic traffic)
  • Fast iteration (clients want demos in days, not weeks)
  • Multi-tenancy baked in (most of our products serve multiple orgs)
  • Real-time streaming (LLM tokens, voice transcripts, market data)
  • i18n (French + English minimum, sometimes more)
  • Heavy interactivity (3D scenes, WebRTC, complex forms, dashboards)
  • Sane DX (we're a small team — every hour of friction is expensive)

Anything below this bar would slow us down or hurt the product.

The shortlist

In 2026 the realistic options for our profile are:

  • Next.js 15 (App Router)
  • Nuxt 4
  • SvelteKit 2
  • Astro 5 (with islands)
  • Remix / React Router 7

We've used four of these in production. Astro we tested for a content site; the others we've shipped real products with. Below is the comparison that actually matters in the trenches.

What Nuxt 4 gets right

Auto-imports — the underrated game-changer

You don't realize how much time you spend importing things until you stop. Nuxt auto-imports ref, computed, useFetch, useState, every component, every composable, every Pinia store. We measured: across our team, this saves ~3% of time and ~25% of merge conflicts.

Next.js has nothing equivalent. SvelteKit has runes (different problem). Astro doesn't auto-import.

File-based routing that scales

pages/projects/[slug].vue/projects/<slug>. Nested layouts. Catch-all routes ([...slug].vue). Dynamic params with proper TS inference. We migrated /projects.vue to /projects/index.vue + /projects/[slug].vue in 30 seconds — no router config edits.

useFetch / useAsyncData are quietly perfect

Server-side fetch on first render, cached for hydration, deduplicated across components, with reactive params and watchEffect support. The day we ported a Next.js project to Nuxt, our useEffect-driven data fetching got 60% smaller.

Module ecosystem is mature

For our seven products we leaned on (in order of usage):

  • @nuxtjs/i18n — full multi-locale routing, hreflang, lazy translations
  • @nuxt/image — image optimization, AVIF/WebP, responsive
  • @nuxt/content — markdown collections (the one running this blog)
  • @nuxtjs/seo — schema.org, sitemap, robots, OG images all in one
  • @vueuse/nuxt — 150+ composables auto-imported
  • @nuxt/icon — Iconify access, server-bundle for production
  • nuxt-security — CSP, HSTS, permissions-policy out of the box
  • @vite-pwa/nuxt — PWA manifest + Workbox

In Next.js you'd assemble half of these from npm packages and write configs. In Nuxt they're modules with sane defaults.

View Transitions API support

experimental.viewTransition: true in the config and you get native View Transitions API on route changes — no library, no JS overhead, gracefully degraded on older browsers. We use this on /projects/projects/[slug] for the morphing card-to-detail effect.

SSR + SPA + SSG + ISR in one config

routeRules: { '/blog/**': { isr: 3600 } } — boom, ISR. Need a route to be SPA-only? { '/dashboard/**': { ssr: false } }. Need static? { prerender: true }. One config, one mental model.

Where Nuxt 4 falls short

We're not zealots. The pain points:

Build times grow

Production build of a medium app (50 components, 8 pages, 10 modules): ~45–90s for the client, ~15–25s for the server. Bigger than we'd like. Vite is fast but Nuxt's module pipeline adds overhead. SvelteKit is faster on small projects (but slower on big ones, in our experience).

TypeScript types regenerate slowly

After adding a new module or moving a page, nuxt prepare takes 5–15s to regenerate types. In hot dev this is invisible (HMR), but when you pnpm install or rebase, it adds friction.

Less Vue ecosystem than React

If you need a niche UI library (complex tree, gantt, kanban), the React equivalent often exists and is better. We've sometimes had to build small primitives ourselves rather than pull in a half-maintained Vue port.

Client-only modes can be tricky

For Three.js scenes, ElevenLabs WebRTC, anything with window/document — you need <ClientOnly> wrappers. Most of the time it's fine; occasionally you fight Hydration mismatch warnings until you nail down which subtree is server-rendered.

Why not Next.js 15

We've shipped Next.js. App Router has matured. So why aren't we on it?

  • React Server Components are powerful but the mental model is heavier. For a 4-person team shipping ad-hoc projects, the overhead of "is this a server or client component, and what does that mean for state, hooks, fetching" slows us down.
  • Auto-import doesn't exist. Imports add up.
  • No equivalent to useFetch with built-in caching, dedup, and SSR coupling — you cobble it together with fetch + Suspense + RSC + a third-party library.
  • The 'use client' directive boundary is a footgun for hydration bugs.
  • The DX delta isn't worth the team retraining cost on every project.

Next.js wins when you have a large team that's already deep in React, when you need RSC's specific advantages (tighter bundle on heavy interactivity), or when your hosting is exclusively Vercel and you want every edge feature. For a small AI agency, Nuxt is faster to ship.

Why not SvelteKit

SvelteKit is genuinely lovely. We've shipped one product on it. Three reasons we didn't standardize:

  1. Runes API churn: the move from stores to runes was the right call but it broke our muscle memory. Vue 3's Composition API has been stable for 3+ years.
  2. Smaller ecosystem: fewer modules, less library coverage.
  3. TS inference in templates is good but not as battle-tested as Vue's vue-tsc + Volar.

SvelteKit is faster on small apps and produces smaller bundles. If we were doing a single-product startup we'd absolutely consider it. For an agency shipping multiple products, the breadth of Nuxt won.

Why not Astro

Astro is the best content site framework in 2026. For a marketing site with light interactivity, it's hard to beat. But our products are applications, not content sites. They're SaaS dashboards, voice agents, real-time fintech UIs. Astro's island architecture starts to fight you when 80% of the page is interactive.

We use Astro patterns (static + islands) inside Nuxt for our marketing pages now. Best of both worlds.

The full stack we ship

For a typical AI product in 2026:

Frontend
├── Nuxt 4 (SSR + SPA hybrid)
├── Vue 3 Composition API
├── Tailwind CSS v4 (with custom @theme tokens)
├── @vueuse/motion for declarative animations
├── @nuxt/icon (Lucide as default set)
└── @nuxtjs/i18n with prefix_except_default

Backend
├── Fastify 4 (faster than Express, type-safe plugins)
├── MongoDB + Mongoose (or pgvector for RAG)
├── Redis (rate limiting, sessions, vector cache)
├── BullMQ (background jobs)
└── Pino for structured logging

AI Layer
├── ElevenLabs Conversational AI (voice)
├── OpenAI / Anthropic (LLM)
├── Pinecone or pgvector (vector store)
└── Custom orchestration (no LangChain in production — too magical)

Infra
├── Vercel (frontend) or DigitalOcean (full-stack)
├── Cloudflare (CDN, DDoS, R2 storage)
├── Twilio (telephony when voice is involved)
├── Posthog (analytics + feature flags + replay)
└── Sentry (error tracking)

We have a starter template that includes all of this with auth, billing, multi-tenancy, observability, i18n, and admin panel pre-wired. New product setup: 2 days instead of 2 weeks.

When we'd pick something else

  • Pure marketing site, content-heavy: Astro
  • Heavy 3D / WebGL with React Three Fiber ecosystem investment: Next.js or Vite + React
  • Native mobile shipped alongside: React Native + Next.js shared codebase
  • Single-team mega-app, RSC-friendly architecture: Next.js 15

But for AI products that need SEO, fast iteration, multi-tenancy, real-time, and i18n — Nuxt 4 wins for us, every time.

Closing thoughts

The right framework is the one your team can ship with. We arrived at Nuxt 4 by trying others and noticing where we got stuck. The stack is reversible — if Vue 4 is a disaster, we'd port. Until then, Nuxt 4 is our default and we recommend it to clients who don't have a strong reason to be elsewhere.

Need help shipping a product on this stack? Get in touch. We've made the architecture mistakes already; we don't need to make them again.


Travailler avec Ikki

Besoin d'aide pour livrer ça en production ?

On conçoit, livre et opère des systèmes IA pour PME et entreprises. Agents vocaux, RAG, automatisation, web & mobile.

Autres articles

SHIP LOG

SHIP-0247·CODEMACHIA·v1.4.22026-05-04 02:22 UTC