Behind the scenes, a lot has been going on in preparation for the release of Nuxt v4 (particularly on the unjs
side with preparations for Nitro v3!)
⚡️ Faster starts powered by jiti
Loading the nuxt config file, as well as modules and other build-time code, is now powered by jiti
v2. You can see more about the release in the jiti v2 release notes, but one of the most important pieces is native node esm import (where possible), which should mean a faster start. ✨
📂 Shared folder for code and types shared with client/server
You should never import Vue app code in your nitro code (or the other way around). But this has meant a friction point when it comes to sharing types or utilities that don't rely on the nitro/vue contexts.
For this, we have a new shared/
folder (#28682). You can't import Vue or nitro code into files in this folder, but it produces auto-imports you can consume throughout the rest of your app.
If needed you can use the new #shared
alias which points to this folder.
The shared folder is alongside your server/
folder. (If you're using compatibilityVersion: 4
, this means it's not inside your app/
folder.)
🦀 rspack
builder
We're excited to announce a new first-class Nuxt builder for rspack
. It's still experimental but we've refactored the internal Nuxt virtual file system to use unplugin
to make this possible.
Let us know if you like it - and feel free to raise any issues you experience with it.
👉 To try it out, you can use this starter - or just install @nuxt/rspack-builder
and set builder: 'rspack'
in your nuxt config file.
✨ New composables
We have new useResponseHeader
and useRuntimeHook
composables (#27131 and #29741).
🔧 New module utilities
We now have a new addServerTemplate
utility (#29320) for adding virtual files for access inside nitro runtime routes.
🚧 v4 changes
We've merged some changes which only take effect with compatibilityVersion: 4
, but which you can opt-into earlier.
- previously, if you had a component like
~/components/App/Header.vue
this would be visible in your devtools as<Header>
. From v4 we ensure this is<AppHeader>
, but it's opt-in to avoid breaking any manual<KeepAlive>
you might have implemented. (#28745). - Nuxt scans page metadata from your files, before calling
pages:extend
. But this has led to some confusing behaviour, as pages added at this point do not end up having their page metadata respected. So we now do not scan metadata before callingpages:extend
. Instead, we have a newpages:resolved
hook, which is called afterpages:extend
, after all pages have been augmented with their metadata. I'd recommend opting into this by settingexperimental.scanPageMeta
toafter-resolve
, as it solves a number of bugs.
🗺️ Roadmap to v3.15
They didn't quite make it in time for v3.14 but for the next minor release you can expect (among other things):
- auto-imported directives from modules (#29203)
- 'isolated' page renders (#29366)
- delayed hydration (#26468)
✅ Upgrading
As usual, our recommendation for upgrading is to run:
npx nuxi@latest upgrade --force
This will refresh your lockfile as well, and ensures that you pull in updates from other dependencies that Nuxt relies on, particularly in the unjs ecosystem.
Full Release Notes
A huge thank you to everyone who's been a part of this release. We have exciting things in store with our next releases! ❤️
Don't hesitate to let us know if you have any feedback or issues! 🙏