Announcing Nuxt 4.0 - A Smoother Dev Experience
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.watchfor 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
ShadCN-UI vs. Other UI Libraries - The Ultimate Showdown
Dive into a detailed comparison of ShadCN-UI with Material-UI, Ant Design, Bootstrap, Tailwind CSS, and Chakra UI to find the best fit for your next project.
Meet Angular v19 - Faster, Smarter, and Easier to Use
Discover Angular v19's game-changing features like incremental hydration and event replay - built for speed and developer joy.
Building Bobologia - Applying React.js Best Practices for a High-Performance Therapy Platform
Learn how React.js best practices were implemented to create Bobologia, a fast, accessible, and SEO-friendly therapy website.