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 review2 matched termsMatched wording:renamedno longerThese matches may be harmless in context. Expand to see the excerpts.
The changelog contains “renamed”; check whether a public API changed.
nuxt: Update renamed stub composables from nuxt/scripts (#28449)
The changelog contains the phrase “no longer”; its impact needs context.
👀 Highlights
I'm pretty excited about this release - we've ported some features we had planned for Nuxt v4 back to v3, as well as a raft of bug fixes and performance improvements - as usual.
Here are a few of things I'm most excited about.
🏘️ Route Groups
We now support naming directories with parentheses/brackets to organise your routes without affecting the path.
We now support custom prefetch triggers for NuxtLink (#27846).
For example:
<template>
<div>
<NuxtLink prefetch-on="interaction">
This will prefetch when hovered or when it gains focus
</NuxtLink>
<!-- note that you probably don't want both enabled! -->
<NuxtLink :prefetch-on="{ visibility: true, interaction: true }">
This will prefetch when hovered/focus - or when it becomes visible
</NuxtLink>
</div>
</template>
We no longer warn when using data fetching composables in middleware (#28604) and we warn when user components' names begin with Lazy (#27838).
It's also possible to enable/disable these globally for your app and override them per link.
When running with node --enable-source-maps, you may have noticed that the source maps for the Vue files in your server build pointed to the Vite build output (something like .nuxt/dist/server/_nuxt/index-O15BBwZ3.js).
Now, even after your Nitro build, your server source maps will reference your original source files (#28521).
Note that one of the easiest ways of improving your build performance is to turn off source maps if you aren't using them, which you can do easily in your nuxt.config:
In the run-up to Nuxt v4, we're working on adding some key functionality for module authors, including a new isNuxtMajorVersion utility where required (#27579) and better inferred typing for merged module options using the new defineNuxtModule().with() method (#27520).
✨ Improved Dev Warnings
We no longer warn when using data fetching composables in middleware (#28604) and we warn when user components' names begin with Lazy (#27838).
🚨 Vue TypeScript Changes
For a while, in the Vue ecosystem, we've been augmenting @vue/runtime-core to add custom properties and more to vue. However, this inadvertently breaks the types for projects that augment vue - which is now the officially recommended in the docs way to augment these interfaces (for example, ComponentCustomProperties, GlobalComponents and so on).
This means all libraries must update their code (or it will break the types of libraries that augment vue instead).
We've updated our types in Nuxt along these lines but you may experience issues with the latest vue-router when used with libraries which haven't yet done so.
Please create an issue with a reproduction - I'll happily help create a PR to resolve in the upstream library in question. Or you may be able to work around the issue by creating a declarations.d.ts in the root of your project with the following code (credit):
import type {
ComponentCustomOptions as _ComponentCustomOptions,
ComponentCustomProperties as _ComponentCustomProperties,
} from 'vue';
declare module '@vue/runtime-core' {
interface ComponentCustomProperties extends _ComponentCustomProperties {}
interface ComponentCustomOptions extends _ComponentCustomOptions {}
}
✅ 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.
