Nuxt is a free and open-source framework with an intuitive and extendable way to create type-safe, performant and production-grade full-stack web applications and websites with Vue.js.
Additional changes to review1 matched termMatched wording:migration guideThese matches may be harmless in context. Expand to see the excerpts.
The changelog points readers to a migration guide.
If you've opted into compatibilityVersion: 4, check out our upgrade guide for additional changes.
👀 Highlights
There's a lot in this one!
⚡️ A New New Nuxt
Say hello to create-nuxt, a new tool for starting Nuxt projects (big thanks to @devgar for donating the package name)!
It's a streamlined version of nuxi init - just a sixth of the size and bundled as a single file with all dependencies inlined, to get you going as fast as possible.
You'll love the new features like custom editor selection, Discovery.js for inspecting resolved configs (perfect for debugging), the return of the schema generator, and slimmer dependencies.
One of our favorite improvements is the ability to track how modules modify your Nuxt configuration - giving you X-ray vision into what's happening under the hood.
We're continuing to make Nuxt faster, and there are a number of improvements in v3.16:
Using exsolve for module resolution (#31124) along with the rest of the unjs ecosystem (nitro, c12, pkg-types, and more) - which dramatically speeds up module resolution
Smarter module resolution paths (#31037) - prioritizes direct imports for better efficiency
Eliminated duplicated Nitro alias resolution (#31088) - leaner file handling
Adopt oxc-parser for parsing in Nuxt plugins (#30066)
All these speed boosts happen automatically - no configuration needed!
Shout out to CodSpeed with Vitest benchmarking to measure these improvements in CI - it has been really helpful.
To add some anecdotal evidence, my personal site at roe.dev loads 32% faster with v3.16, and nuxt.com is 28% faster. I hope you see similar results! ⚡️
🕰️ Delayed Hydration Support
We're very pleased to bring you native delayed/lazy hydration support (#26468)! This lets you control exactly when components hydrate, which can improve initial load performance and time-to-interactive. We're leveraging Vue's built-in hydration strategies - check them out in the Vue docs.
<template>
<!-- Hydrate when component becomes visible in viewport -->
<LazyExpensiveComponent hydrate-on-visible />
<!-- Hydrate when browser is idle -->
<LazyHeavyComponent hydrate-on-idle />
<!-- Hydrate on interaction (mouseover in this case) -->
<LazyDropdown hydrate-on-interaction="mouseover" />
<!-- Hydrate when media query matches -->
<LazyMobileMenu hydrate-on-media-query="(max-width: 768px)" />
<!-- Hydrate after a specific delay in milliseconds -->
<LazyFooter :hydrate-after="2000" />
</template>
You can also listen for when hydration happens with the @hydrated event:
Or keep it simple with debug: true to enable all these debugging features.
🎨 Decorators Support
For the decorator fans out there (whoever you are!), we've added experimental support (#27672). As with all experimental features, feedback is much appreciated.
function something (_method: () => unknown) {
return () => 'decorated'
}
class SomeClass {
@something
public someMethod () {
return 'initial'
}
}
const value = new SomeClass().someMethod()
// returns 'decorated'
📛 Named Layer Aliases
It's been much requested, and it's here! Auto-scanned local layers (from your ~~/layers directory) now automatically create aliases. You can access your ~~/layers/test layer via #layers/test (#30948) - no configuration needed.
If you want named aliases for other layers, you can add a name to your layer configuration:
This creates the alias #layers/example-layer pointing to your layer - making imports cleaner and more intuitive.
🧪 Error Handling Improvements
We've greatly improved error messages and source tracking (#31144):
Better warnings for undefined useAsyncData calls with precise file location information
Error pages now appear correctly on island page errors (#31081)
Plus, we're now using Nitro's beautiful error handling (powered by youch) to provide more helpful error messages in the terminal, complete with stacktrace support.
Nitro now also automatically applies source maps without requiring extra Node options, and we set appropriate security headers when rendering error pages.
📦 Module Development Improvements
For module authors, we've added the ability to augment Nitro types with addTypeTemplate (#31079):
This release includes several major version upgrades from the unjs ecosystem, focused on performance and smaller bundle sizes through ESM-only distributions:
unenv upgraded to v2 (full rewrite)
db0 upgraded to v0.3 (ESM-only, native node:sql, improvements)
ohash upgraded to v2 (ESM-only, native node:crypto support, much faster)
untyped upgraded to v2 (ESM-only, smaller install size)
unimport upgraded to v4 (improvements)
c12 upgraded to v3 (ESM-only)
pathe upgraded to v2 (ESM-only)
cookie-es upgraded to v2 (ESM-only)
esbuild upgraded to v0.25
chokidar upgraded to v4
✅ Upgrading
As usual, our recommendation for upgrading is to run:
npx nuxi@latest upgrade --dedupe
This refreshes your lockfile and pulls in all the latest dependencies that Nuxt relies on, especially from the unjs ecosystem.
