37% OFF during Black Friday at Mastering Nuxt.
Release·  

Nuxt 3.14

Nuxt 3.14 is out - with a new rspack builder, shared folder, and performance enhancements!

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.

  1. 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).
  2. 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 calling pages:extend. Instead, we have a new pages:resolved hook, which is called after pages:extend, after all pages have been augmented with their metadata. I'd recommend opting into this by setting experimental.scanPageMeta to after-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

Read the full release notes of Nuxt v3.14.0.

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! 🙏