The Vue ecosystem is evolving fast.
Just as Nuxt 3’s modern architecture settled in, the team ushered in a new era with Nuxt 4.
Focus areas: performance, edge rendering, a React-like server component model (RSC), and an improved DX.
This post breaks down the biggest additions in Nuxt 4, their impact, and what to know when migrating.
1) Nitro 3 — the next-gen render engine
At the heart of Nuxt 4 is a revamped Nitro 3. Nitro is no longer just a server framework—it’s a full edge-rendering platform.Highlights
- Incremental Streaming: Send chunks as components become ready (think React 19).
- Isomorphic Handlers: APIs run on both edge and node with the same code.
- Persistent Cache API: Smart prioritization across disk and KV stores.
2) Vue 3.5 + RSC (Remote Server Components)
Nuxt 4 ships with Vue 3.5 compatibility and supports Server Components. Some components render only on the server and ship no client JS.Example
<!-- server-only component -->
<script setup>
const posts = await $fetch('/api/posts')
</script>
<template>
<ul>
<li v-for="post in posts" :key="post.id">{{ post.title }}</li>
</ul>
</template>
Benefits:
- Smaller client bundles
- Faster hydration
- Better SEO
Bottom line: Components can live on the server, the client, or both.
3) Hybrid rendering model
Under a Universal Rendering Mode, Nuxt 4 unifies SSR, SSG, ISR, and Edge strategies.export default defineNuxtConfig({
routeRules: {
'/': { prerender: true },
'/dashboard': { ssr: true },
'/blog/**': { swr: 300 },
'/api/**': { cache: { maxAge: 120 } }
}
})
4) Devtools 2.0
Nuxt Devtools got a redesign. Instead of a browser-only panel, there’s now a standalone overlay.Features
- Route-level performance timeline
- AsyncData & Composable inspector
- SSR cache inspector
- Lighthouse-like Nuxt Score
npx nuxi devtools enable
5) New useFetch 2.0 API
useFetch graduates from a helper to a runtime-integrated API with built-in abort, deduplication, and cache controls.Example
const { data, refresh, pending } = await useFetch('/api/products', {
key: 'products',
dedupe: true,
server: true
})
dedupe→ collapses identical concurrent requestsserver→ prefetch during SSRrefresh()→ reactive cache invalidation
useAsyncData and useFetch effectively disappears.6) Config layers & module ecosystem
Nuxt 4 expands config layering. Modules/monorepo packages can provide their ownnuxt.config layers.export default defineNuxtConfig({
extends: ['@myorg/ui', '@myorg/docs'],
modules: ['@nuxt/image', '@nuxt/seo']
})
7) Edge & Bun support
Nitro 3 adds native support for Bun, Deno, Cloudflare Workers, and Vercel Edge. Nuxt becomes truly universal.npx nuxi deploy --target=cloudflare
8) Migration — from Nuxt 3 to 4
Good news: Nuxt 4 is largely backward-compatible. 🎉 Minor changes include:useFetchanduseAsyncDataconvergence- Renamed
nitroconfig sections - Expanded
#importswith more global composables
npx nuxi upgrade
💡 Tip: Upgrade your Nuxt 3 app to 3.11 first, then move to 4.
9) Performance benchmarks
Reported improvements:- Cold start: ~45% faster
- Memory: ~30% lower
- Render latency: ~25 ms average drop
10) DX upgrades
nuxi new componentauto-generates prop types- Friendlier error messages
- TypeScript strict by default
- More stable hot reload
Conclusion
Nuxt 4 is more than a version bump—it’s an architectural leap. It blends SSR with edge rendering and brings a component-first mindset to the server.In short:
- Nitro 3 → faster rendering
- RSC → server components
- Hybrid rendering → per-route strategies
- Devtools 2.0 → smarter debugging