Nuxt 4 Announced: Major Architecture Improvements

Nuxt 4 — the Vue-powered full-stack framework — has been announced with significant architectural improvements aimed at improving developer experience and build performance.

New Directory Structure

Nuxt 4 consolidates the application code under a single app/ directory, separating it clearly from server-side code:

nuxt-app/
├── app/
│   ├── components/
│   ├── composables/
│   ├── layouts/
│   ├── pages/
│   └── app.vue
├── server/
│   ├── api/
│   └── middleware/
└── nuxt.config.ts

Nitro 3

Nuxt 4 ships with Nitro 3 as its server engine, bringing faster cold starts, better edge runtime support (Cloudflare Workers, Deno Deploy), and a new SQL database layer via useDatabase().

Improved Data Fetching

The useFetch and useAsyncData composables have been refined with better deduplication and a new getCachedData option for client-side caching strategies.