Nuxt 4.0 became stable on July 15, 2025. Its headline change was a cleaner default project structure, alongside updates to data fetching, TypeScript configuration, and the CLI. Existing Nuxt projects do not have to adopt the new directory layout, but teams upgrading should review their modules and TypeScript setup, then verify the build and tests.
What Nuxt 4.0 changed
Nuxt described 4.0 as a stability-focused evolution informed by a year of real-world testing, rather than a release built around a dramatic rewrite. The changes chiefly affect how projects are organized and how Nuxt handles data and TypeScript. Nuxt’s announcement, published July 15, 2025, is the primary account of the release.
As an Amazon Associate I earn from qualifying purchases.
A new default location for application code
In a fresh Nuxt 4 project, application code lives under app/. That directory can contain assets, components, composables, layouts, middleware, pages, plugins, and utilities. The separation distinguishes app code from root-level items such as node_modules/ and .git/; Nuxt also says it can help file watchers and give IDEs clearer context about client and server code.
This is a default, not a forced migration. Nuxt says existing project layouts continue to work, so an upgrade does not by itself require moving every directory into app/.
Shared and more controllable data fetching
Nuxt 4 changes how useAsyncData and useFetch behave when calls use the same key: they share the result automatically. The release also adds cleanup when components unmount, supports reactive keys for refetching, and gives developers more control over cached data.
useAsyncData is designed for server-side rendering: Nuxt places resolved responses in its payload so the browser can use them during hydration instead of making the same request again. See the Nuxt 4 useAsyncData documentation for the API details.
Rank #2
Separate TypeScript contexts
Nuxt 4 separates TypeScript project contexts for app, server, shared, and builder code. Its current directory-structure documentation describes generated configuration files for app, server, node, and shared contexts, referenced from the root project configuration. The aim is clearer context and better type inference; the change can also reveal existing TypeScript issues that were previously hidden.
Nuxt documents the generated files and root references in its tsconfig guide.
CLI and development-server internals
Nuxt’s announcement describes a faster CLI, reuse of the V8 compile cache, native file watching, and socket-based communication between the CLI and Vite dev server. These are implementation changes described by Nuxt, not independent benchmark results or a guarantee of a particular speedup on every machine.
How to upgrade from Nuxt 3
Nuxt’s recommended starting point is its upgrade command. Read the official guide before changing a production project, because modules may need updates for Nuxt 4 and changes to TypeScript setup can surface issues. The optional Codemod recipe can automate many migration steps, but not all of them.
-
Review the upgrade guide. Check your project’s modules, custom configuration, and TypeScript setup against Nuxt’s Nuxt 4 announcement and upgrade guidance.
Recommended Free Tools
Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy. -
Run the upgrade command. From the project directory, use
npx nuxt upgrade --dedupe, as Nuxt recommends. -
Use the Codemod only if it fits your project. Nuxt provides an optional Codemod recipe for many, but not every, migration change; review its proposed changes rather than assuming it completes the upgrade.
-
Build and test the application. Check the production build and run the project’s tests. Investigate failures in module compatibility, TypeScript configuration, and data-fetching behavior before deploying.
How to decide whether to change your project layout
The new app/ structure is Nuxt 4’s default for new projects, but an existing layout remains supported. Consider changing it when the separation would make your codebase easier to navigate or improve your team’s tooling context; avoid treating it as a prerequisite for upgrading.
PC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware match- Keep the existing layout if it works for your project and a directory move would add risk without a clear benefit.
- Adopt
app/if the clearer boundary between application code and root-level files would help your team, and you can verify the changes through a build and tests. - Check module and TypeScript dependencies either way. A layout decision does not remove the need to validate compatibility and the separated TypeScript contexts.
Nuxt 4.0 is a release milestone, not a current-version claim
Nuxt 4.0’s stable release date was July 15, 2025. Nuxt continued developing the major version: its Nuxt 4.5 announcement, dated July 18, 2026, lists Vite 8, Rspack 2, experimental SSR streaming, a stable error-code system, and new composables and conventions. Those later changes provide context for Nuxt 4.0; they do not mean every feature mentioned for 4.5 is stable or enabled by default.
The newsletter issue that called attention to the release, Bytes #410, was published July 22, 2025.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
