0%
FrontEnd

Announcing Nuxt 4.0 - A Smoother Dev Experience

Daniel Roe Daniel Roe
3 min read

Dive into Nuxt 4.0’s release, featuring a new app/ directory, smarter data fetching, and a faster CLI - all with a smooth upgrade path!

Nuxt 4.0 is here, and it’s all about making your life as a developer easier! 🎉 After a year of real-world testing, the team has rolled out a stability-focused release packed with thoughtful improvements. If you’ve been experimenting with compatibility mode, you’ll feel right at home—let’s explore what’s new!

What’s New in Nuxt 4?

This release is all about enhancing your daily workflow:

🗂️ New Project Structure

The standout change is the app/ directory, where your application code now lives by default:

my-nuxt-app/
├─ app/
│  ├─ assets/
│  ├─ components/
│  └─ pages/
├─ public/
└─ nuxt.config.ts

This keeps things tidy, speeds up file watchers (especially on Windows/Linux), and gives your IDE better context for client vs. server code. Not ready to switch? No problem—Nuxt supports your old structure seamlessly. Check out the fresh UI templates in action:

🔄 Smarter Data Fetching

useAsyncData and useFetch got a glow-up! Components sharing the same key now share data automatically, cleanup happens on unmount, and reactive keys trigger refetches. You also get more control over cached data. These tweaks, rolled out gradually in Nuxt 3, are now default in v4—expect ongoing data layer enhancements.

🔧 Better TypeScript

Nuxt 4 streamlines TypeScript with separate projects for app, server, shared/, and builder code, boosting autocompletion and reducing errors. Plus, you’ll only need one tsconfig.json—a game-changer for smoother typing. Spot an issue? Let the team know!

⚡ Faster CLI

The @nuxt/cli is snappier with:

  • Faster cold starts
  • Node.js compile cache
  • Native fs.watch for efficiency
  • Socket-based communication (less overhead, especially on Windows)

These upgrades make dev cycles noticeably quicker—more to come!

How to Upgrade

Upgrading is designed to be smooth. Run:

npx nuxt upgrade --dedupe

Use Codemod for migrations:

npx codemod@latest nuxt/4/migration-recipe

Test thoroughly and check the upgrade guide for specifics. Most breaking changes (e.g., Nuxt 2 compatibility removal from @nuxt/kit) have options to revert old behavior while you adjust.

What’s Next?

Patch releases are incoming, and Nuxt 3 gets maintenance until January 2026. Nuxt 5, with Nitro v3 and h3 v2, is on the horizon—possibly in six months—plus exciting features like SSR streaming ( #4753) and multi-app support ( #21635) for 3.x and 4.x.

Thanks!

A huge shoutout to everyone testing v4 compatibility mode—your feedback made this possible. Happy coding with Nuxt 4! 🚀

More in FrontEnd