Nuxt 3.7
π£ A New CLI
We've refactored nuxi
using unjs/citty and this marks the first Nuxt release that depends on the new version, safely in its own repository. We have grand plans for this - check out some of the features + roadmap discussions in nuxt/cli and please feel free to contribute!
Nuxi is now decoupled from the main nuxt
version - we plan to iterate and release nuxi more quickly in future so you can expect new things coming soon!
πΈοΈ Native Web Streams and Response
With improvements in unjs/h3 and unjs/nitro, it's now possible to directly return a Response
object from server routes, meaning it's also possible to return and handle streams natively in Nuxt.
π Check out the full detail in the unjs/h3 and unjs/nitro release notes.
π₯ HTML Rendering Optimisations
This release comes with a couple of improvements in rendering HTML responses from the server. We now determine whether to preload/prefetch resources at build time (so you can customise this in the build:manifest
hook). We also now manage rendering the HTML for them directly in unhead
(#22179), which means you can configure the order for <link>
, <meta>
, <script>
, <style>
, and more. And - in our preliminary testing - it's even faster!
It's possible to opt-in to upcoming head improvements with the experimental.headNext
flag. This currently includes a new ordering algorithm based on capo.js (#22431) and allows enabling future optimisations as they are released in unhead
:
export default defineNuxtConfig({
experimental: {
headNext: true
}
})
We'd love your thoughts - you can respond with any issues/feedback in this discussion.
π οΈ Build Environment Shortcuts
In your Nuxt config you can now use $client
and $server
shortcuts to easily define configuration that is specific to just the Vite client/server (#22302) or webpack client/server (#22304) builds. This previously was only possible with the vite:extendConfig
and webpack:config
hooks.
For example:
export default defineNuxtConfig({
vite: {
$client: {
build: {
rollupOptions: {
output: {
chunkFileNames: '_nuxt/[hash].js',
assetFileNames: '_nuxt/[hash][extname]',
entryFileNames: '_nuxt/[hash].js'
}
}
}
}
}
})
β‘οΈ Vite 4.4
We've chosen to unpin Vite from minor versions, meaning whenever Vite releases a new feature version you can opt-in straight away. Vite 4.4 brings a lot of exciting things, including experimental Lightning CSS support - and much more!
π Check out the Vite release notes for more.
πͺ TypeScript Updates
We now use purely relative paths in the generated tsconfig.json
instead of setting a baseUrl
. This means better support for dev environments like docker images where the absolute path may not match your IDE (#22410).
We also set a couple of additional compiler flag defaults to match Vite/TS recommendations (#22468).
Plus, you should now get type hinted access to layouts in setPageLayout
and also in <NuxtLayout name>
(#22363).
π¦ Async Context support
If you've ever got an issue with 'Nuxt context unavailable' this might be one for you. We now support native async context for Bun and Node under an experimental flag, in both Nuxt and Nitro (#20918).
This enables using Nuxt composables on the server without needing to ensure they are being called directly in a setup function. It also allows the same in Nitro, with a new useEvent()
utility that is usable in server routes.
To try it out, you can enable experimental.asyncContext
:
export default defineNuxtConfig({
experimental: {
asyncContext: true
}
})
π Watcher Updates
We've fixed a couple of issues with watchers, meaning that you should need to restart your server less often - and you should see a significant performance increase if you are using layers.
βοΈ Nitro 2.6
There lots more exciting features coming directly from Nitro 2.6, including smaller, lighter servers and new persistent data storage in a .data
directory.
π Read more in the full release article.
β
Upgrading
As usual, our recommendation for upgrading is to run:
npx nuxi 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 changelog
Read the full release notes on https://github.com/nuxt/nuxt/releases/tag/v3.7.0