Releases: nuxt/nuxt
v4.1.2
4.1.2 is a regularly scheduled patch release.
✅ Upgrading
Our recommendation for upgrading is to run:
npx nuxt upgrade --dedupe
This will deduplicate your lockfile as well, and help ensure that you pull in updates from other dependencies that Nuxt relies on, particularly in the unjs ecosystem.
👉 Changelog
🔥 Performance
- kit: Do not normalise templates in loop if
dst
is present (#33200) - nuxt: Remove watcher from
hydrate-when
lazy hydration strategy (#33199) - nuxt,schema: Normalise components + directories more efficiently (#33207)
- kit,nuxt: Reduce unnecessary iteration in nuxt code (#33212)
- nuxt: Skip running lazy hydration transform with filter (#33213)
🩹 Fixes
- schema: Add
pkg-types
to dependencies (9fe2541ca) - nuxt: Ignore errors when treeshaking composables within other composables (f99eac516)
- nuxt: Do not tree-shake composables within other composables (#33153)
- kit: Ensure module dependencies are typed correctly (4568e8451)
- nuxt: Prevent Infinity
backgroundSize
in loading indicator (#33211) - nuxt: Remove unused
enabled
from components dir options (#32844) - nuxt: Sync watch request in useAsyncData (#33192)
- nuxt: Move key imports logic after all modules run (#33214)
📖 Documentation
- Update reference to source dir (65712297a)
- Update language on bridge head migration (c9d986889)
- Update file path for pinia store (#33205)
- Add
app/
suffix to a few links (#33217)
🏡 Chore
- Dedupe lockfile (d054c90d9)
- Suppress htmlnano type error (ff2e77809)
- nuxt: Unpin tinyglobby (b9ec6507b)
✅ Tests
- Update bundle size test (4d9feb00d)
❤️ Contributors
- Julien Huang (@huang-julien)
- Daniel Roe (@danielroe)
- Adrien Foulon (@Tofandel)
- Matej Černý (@cernymatej)
- Антон Стасюк (@11Alone11)
- wuiyang (@wuiyang)
- Revadike (@Revadike)
v3.19.2
3.19.2 is a regularly scheduled patch release.
✅ Upgrading
Our recommendation for upgrading is to run:
npx nuxt upgrade --dedupe
This will deduplicate your lockfile as well, and help ensure that you pull in updates from other dependencies that Nuxt relies on, particularly in the unjs ecosystem.
👉 Changelog
🔥 Performance
- kit: Do not normalise templates in loop if
dst
is present (#33200) - nuxt: Remove watcher from
hydrate-when
lazy hydration strategy (#33199) - nuxt,schema: Normalise components + directories more efficiently (#33207)
- kit,nuxt: Reduce unnecessary iteration in nuxt code (#33212)
- nuxt: Skip running lazy hydration transform with filter (#33213)
🩹 Fixes
- schema: Add
pkg-types
to dependencies (a6e5dd756) - nuxt: Ignore errors when treeshaking composables within other composables (e3e42ac77)
- nuxt: Do not tree-shake composables within other composables (#33153)
- kit: Ensure module dependencies are typed correctly (ea16d182a)
- nuxt: Prevent Infinity
backgroundSize
in loading indicator (#33211) - nuxt: Remove unused
enabled
from components dir options (#32844) - nuxt: Sync watch request in useAsyncData (#33192)
- nuxt: Move key imports logic after all modules run (#33214)
📖 Documentation
- Update language on bridge head migration (32e76f609)
🏡 Chore
- nuxt: Unpin tinyglobby (1811db080)
❤️ Contributors
- Daniel Roe (@danielroe)
- Adrien Foulon (@Tofandel)
- Matej Černý (@cernymatej)
- Антон Стасюк (@11Alone11)
- wuiyang (@wuiyang)
v4.1.1
v4.1.1 is a regularly scheduled patch release
✅ Upgrading
Our recommendation for upgrading is to run:
npx nuxt upgrade --dedupe
This will deduplicate your lockfile as well, and help ensure that you pull in updates from other dependencies that Nuxt relies on, particularly in the unjs ecosystem.
👉 Changelog
🩹 Fixes
- nuxt: Correct relative path of auto imported components (#33122)
- nuxt: Prefer accessing
globalThis
overwindow
(#33125) - nuxt: Migrate to AST-aware tree-shaking + route injection (#33128)
- nuxt: Ignore #components import mapping inside packages that use it internally (#33049)
- vite: Remove explicit vite-node configuration of
deps.inline
(#33133) - nuxt: Include trace in dev-time
useRoute
usage warning (#33039) - kit: Improve DX by displaying module name when possible (#33137)
- nuxt: Print route middleware path in warning (#33136)
- nuxt: Include core auto-imports from
imports:sources
in override warning (#33050) - nuxt: Render relative importmap entry path if required (#33146)
📖 Documentation
- Add
--
to bun create command (5e661f0ca) - Add
app/
prefix in lots of cases (#33117) - Add JSDoc for
navigateTo
(#21442)
🏡 Chore
- Correct
rou3
github url (#33130) - Include
.ts
extension (db9d840e1) - Build before releasing (25f9282a4)
🤖 CI
- Remove default discord reactions from thread (more noise than it's worth) (183913fe2)
- Rewrite release workflow in ts + support multiple tags (4469ead82)
- Pass correct flag (711037cda)
- Pass tag via env variable (fb83cd5ba)
- Drop
4x
tags from releases (1cd8a6857)
❤️ Contributors
- Daniel Roe (@danielroe)
- Matej Černý (@cernymatej)
- Bobbie Goede (@BobbieGoede)
- Sébastien Chopin (@atinux)
- Octavio Araiza (@8ctavio)
- Michael Brevard (@GalacticHypernova)
- abeer0 (@iiio2)
- 山吹色御守 (@KazariEX)
v3.19.1
v3.19.1 is a regularly scheduled patch release
✅ Upgrading
Our recommendation for upgrading is to run:
npx nuxt upgrade --dedupe
This will deduplicate your lockfile as well, and help ensure that you pull in updates from other dependencies that Nuxt relies on, particularly in the unjs ecosystem.
👉 Changelog
🩹 Fixes
- nuxt: Correct relative path of auto imported components (#33122)
- nuxt: Prefer accessing
globalThis
overwindow
(#33125) - nuxt: Migrate to AST-aware tree-shaking + route injection (#33128)
- nuxt: Ignore #components import mapping inside packages that use it internally (#33049)
- vite: Remove explicit vite-node configuration of
deps.inline
(#33133) - nuxt: Include trace in dev-time
useRoute
usage warning (#33039) - nuxt: Print route middleware path in warning (#33136)
- nuxt: Include core auto-imports from
imports:sources
in override warning (#33050) - nuxt: Render relative importmap entry path if required (#33146)
📖 Documentation
- Add documentation for module lifecycle hooks (#33115)
- Add
--
to bun create command (ab6aa8ee5) - Add JSDoc for
navigateTo
(#21442)
🏡 Chore
✅ Tests
🤖 CI
- Remove default discord reactions from thread (more noise than it's worth) (2e3c91e0c)
- Rewrite release workflow in ts + support multiple tags (478c64342)
- Pass correct flag (a954f383f)
- Pass tag via env variable (dcfc82688)
- Drop
4x
tags from releases (e3aa50d11)
❤️ Contributors
- Daniel Roe (@danielroe)
- Matej Černý (@cernymatej)
- Bobbie Goede (@BobbieGoede)
- Octavio Araiza (@8ctavio)
- Michael Brevard (@GalacticHypernova)
- abeer0 (@iiio2)
- 山吹色御守 (@KazariEX)
v4.1.0
👀 Highlights
🔥 Build and Performance Improvements
🍫 Enhanced Chunk Stability
Build stability has been significantly improved with import maps (#33075). This prevents cascading hash changes that could invalidate large portions of your build when small changes are made:
<!-- Automatically injected import map -->
<script type="importmap">{"imports":{"#entry":"/_nuxt/DC5HVSK5.js"}}</script>
By default, JS chunks emitted in a Vite build are hashed, which means they can be cached immutably. However, this can cause a significant issue: a change to a single component can cause every hash to be invalidated, massively increasing the chance of 404s.
In short:
- a component is changed slightly - the hash of its JS chunk changes
- the page which uses the component has to be updated to reference the new file name
- the entry now has its hash changed because it dynamically imports the page
- every other file which imports the entry has its hash changed because the entry file name is changed
Obviously this wasn't optimal. With this new feature, the hash of (otherwise) unchanged files which import the entry won't be affected.
This feature is automatically enabled and helps maintain better cache efficiency in production. It does require native import map support, but Nuxt will automatically disable it if you have configured vite.build.target
to include a browser that doesn't support import maps.
And of course you can disable it if needed:
export default defineNuxtConfig({
experimental: {
entryImportMap: false
}
})
🦀 Experimental Rolldown Support
Nuxt now includes experimental support for rolldown-vite
(#31812), bringing Rust-powered bundling for potentially faster builds.
To try Rolldown in your Nuxt project, you need to override Vite with the rolldown-powered version since Vite is a dependency of Nuxt. Add the following to your package.json
:
npm:
{
"overrides": {
"vite": "npm:rolldown-vite@latest"
}
}
pnpm:
{
"pnpm": {
"overrides": {
"vite": "npm:rolldown-vite@latest"
}
}
}
yarn:
{
"resolutions": {
"vite": "npm:rolldown-vite@latest"
}
}
bun:
{
"overrides": {
"vite": "npm:rolldown-vite@latest"
}
}
After adding the override, reinstall your dependencies. Nuxt will automatically detect when Rolldown is available and adjust its build configuration accordingly.
For more details on Rolldown integration, see the Vite Rolldown guide.
Note
This is experimental and may have some limitations, but offers a glimpse into the future of high-performance bundling in Nuxt.
🧪 Improved Lazy Hydration
Lazy hydration macros now work without auto-imports (#33037), making them more reliable when component auto-discovery is disabled:
<script setup>
// Works even with components: false
const LazyComponent = defineLazyHydrationComponent(
'visible',
() => import('./MyComponent.vue')
)
</script>
This ensures that components that are not "discovered" through Nuxt (e.g., because components
is set to false
in the config) can still be used in lazy hydration macros.
📄 Enhanced Page Rules
If you have enabled experimental extraction of route rules, these are now exposed on a dedicated rules
property on NuxtPage
objects (#32897), making them more accessible to modules and improving the overall architecture:
// In your module
nuxt.hook('pages:extend', pages => {
pages.push({
path: '/api-docs',
rules: {
prerender: true,
cors: true,
headers: { 'Cache-Control': 's-maxage=31536000' }
}
})
})
The defineRouteRules
function continues to work exactly as before, but now provides better integration possibilities for modules.
🚀 Module Development Enhancements
Module Dependencies and Integration
Modules can now specify dependencies and modify options for other modules (#33063). This enables better module integration and ensures proper setup order:
export default defineNuxtModule({
meta: {
name: 'my-module',
},
moduleDependencies: {
'some-module': {
// You can specify a version constraint for the module
version: '>=2',
// By default moduleDependencies will be added to the list of modules
// to be installed by Nuxt unless `optional` is set.
optional: true,
// Any configuration that should override `nuxt.options`.
overrides: {},
// Any configuration that should be set. It will override module defaults but
// will not override any configuration set in `nuxt.options`.
defaults: {}
}
},
setup (options, nuxt) {
// Your module setup logic
}
})
This replaces the deprecated installModule
function and provides a more robust way to handle module dependencies with version constraints and configuration merging.
🪝 Module Lifecycle Hooks
Module authors now have access to two new lifecycle hooks: onInstall
and onUpgrade
(#32397). These hooks allow modules to perform additional setup steps when first installed or when upgraded to a new version:
export default defineNuxtModule({
meta: {
name: 'my-module',
version: '1.0.0',
},
onInstall(nuxt) {
// This will be run when the module is first installed
console.log('Setting up my-module for the first time!')
},
onUpgrade(inlineOptions, nuxt, previousVersion) {
// This will be run when the module is upgraded
console.log(`Upgrading my-module from v${previousVersion}`)
}
})
The hooks are only triggered when both name
and version
are provided in the module metadata. Nuxt uses the .nuxtrc
file internally to track module versions and trigger the appropriate hooks. (If you haven't come across it before, the .nuxtrc
file should be committed to version control.)
Tip
This means module authors can begin implementing their own 'setup wizards' to provide a better experience when some setup is required after installing a module.
🙈 Enhanced File Resolution
The new ignore
option for resolveFiles
(#32858) allows module authors to exclude specific files based on glob patterns:
// Resolve all .vue files except test files
const files = await resolveFiles(srcDir, '**/*.vue', {
ignore: ['**/*.test.vue', '**/__tests__/**']
})
📂 Layer Directories Utility
A new getLayerDirectories
utility (#33098) provides a clean interface for accessing layer directories without directly accessing private APIs:
import { getLayerDirectories } from '@nuxt/kit'
const layerDirs = await getLayerDirectories(nuxt)
// Access key directories:
// layerDirs.app - /app/ by default
// layerDirs.appPages - /app/pages by default
// layerDirs.server - /server by default
// layerDirs.public - /public by default
✨ Developer Experience Improvements
🎱 Simplified Kit Utilities
Several kit utilities have been improved for better developer experience:
addServerImports
now supports single imports (#32289):
// Before: required array
addServerImports([{ from: 'my-package', name: 'myUtility' }])
// Now: can pass directly
addServerImports({ from: 'my-package', name: 'myUtility' })
🔥 Performance Optimizations
This release includes several internal performance optimizations:
- Improved route rules cache management (#32877)
- Optimized app manifest watching (#32880)
- Better TypeScript processing for page metadata (#32920)
🐛 Notable Fixes
- Improved
useFetch
hook typing (#32891) - Better handling of TypeScript expressions in page metadata (#32902, #32914)
- Enhanced route matching and synchronization (#32899)
- Reduced verbosity of Vue server warnings in development (#33018)
- Better handling of relative time calculations in
<NuxtTime>
(#32893)
✅ Upgrading
As usual, our recommendation for upgrading is to run:
npx nuxt upgrade --dedupe
This will refresh your lockfile and pull in all the latest dependencies that Nuxt relies on, especially from the unjs ecosystem.
👉 Changelog
🚀 Enhancements
- kit: Add
ignore
option toresolveFiles
(#32858) - kit: Add
onInstall
andonUpgrade
module hooks (#32397) - nuxt,vite: Add experimental support for
rolldown-vite
(#31812) - nuxt: Extract
defineRouteRules
to pagerules
property (#32897) - nuxt,vite: Use importmap to increase chunk stability (#33075)
- nuxt: Lazy hydration macros without auto-imports (#33037)
- **kit,...
v3.19.0
👀 Highlights
Please see the release notes for Nuxt v4.1 for full details on the features and fixes in Nuxt v3.19.
✅ Upgrading
As usual, our recommendation for upgrading is to run:
npx nuxt upgrade --dedupe
This will refresh your lockfile and pull in all the latest dependencies that Nuxt relies on, especially from the unjs ecosystem.
👉 Changelog
🚀 Enhancements
- kit: Add
ignore
option toresolveFiles
(#32858) - kit: Add
onInstall
andonUpgrade
module hooks (#32397) - nuxt,vite: Add experimental support for
rolldown-vite
(#31812) - nuxt: Extract
defineRouteRules
to pagerules
property (#32897) - nuxt,vite: Use importmap to increase chunk stability (#33075)
- nuxt: Lazy hydration macros without auto-imports (#33037)
- kit,nuxt,schema: Allow modules to specify dependencies (#33063)
- kit,nuxt: Add
getLayerDirectories
util and refactor to use it (#33098)
🔥 Performance
- nuxt: Clear inline route rules cache when pages change (#32877)
- nuxt: Stop watching app manifest once a change has been detected (#32880)
🩹 Fixes
- nuxt: Handle
satisfies
in page augmentation (#32902) - nuxt: Type response in
useFetch
hooks (#32891) - nuxt: Add TS parenthesis and as expression for page meta extraction (#32914)
- nuxt: Use correct unit thresholds for relative time (#32893)
- nuxt: Handle uncached current build manifests (#32913)
- kit: Resolve directories in
resolvePath
and normalize file extensions (#32857) - schema,vite: Bump
requestTimeout
+ allow configuration (#32874) - nuxt: Deep merge extracted route meta (#32887)
- nuxt: Do not expose app components until fully resolved (#32993)
- kit: Only exclude
node_modules/
if no customsrcDir
(#32987) - nuxt: Compare final matched routes when syncing
route
object (#32899) - nuxt: Make vue server warnings much less verbose in dev mode (#33018)
- schema: Allow disabling cssnano/autoprefixer postcss plugins (#33016)
- kit: Ensure local layers are prioritised alphabetically (#33030)
- kit,nuxt: Expose global types to vue compiler (#33026)
- nuxt: Support config type inference for
defineNuxtModule().with()
(#33081) - nuxt: Search for colliding names in route children (31a9282c2)
- nuxt: Delete
nuxtApp._runningTransition
on resolve (#33025) - nuxt: Add validation for nuxt island reviver key (#33069)
- kit: Prioritise local layers over extended layers (ae8b0d2b8)
- kit: Address merge conflict (89ccbbebb)
- kit: Do not resolve public dir aliases (5d87d3a80)
💅 Refactors
- nuxt: Simplify page segment parsing (#32901)
- nuxt: Remove unnecessary
async/await
inafterEach
(#32999) - vite: Simplify inline chunk iteration (9ea90fc33)
- kit,nuxt,ui-templates,vite: Address deprecations + improve regexp perf (#33093)
📖 Documentation
- Add a section about augmenting types with TS project references (#32843)
- Switch example to use vitest projects (#32863)
- Update testing
setupTimeout
and addteardownTimeout
(#32868) - Add middleware to layers guide (fa516d440)
- Add documentation for
--nightly
command (#32907) - Update package information in roadmap section (#32881)
- Add more info about nuxt spa loader element attributes (#32871)
- Correct filename in example (#33000)
- Add more information about using
useRoute
and accessing route in middleware (#33004) - Avoid variable shadowing in locale example (#33031)
🏡 Chore
- Remove stray test file (42fd247a4)
- Ignore webpagetest.org when scanning links (cb18f4960)
- Add
type: 'module'
in playground (#33099)
✅ Tests
- Add failing test for link component duplication (#32792)
- Simplify module hook tests (#32950)
- Refactor stubbing of
import.meta.dev
(#33023) - Use
findWorkspaceDir
rather than relative paths to repo root (c4c3ada96) - Improve router test for global transitions (7e6a6fc35)
- Use
expect.poll
(f4354203a) - Use
expect.poll
instead ofexpectWithPolling
(15ca5be95) - Use
vi.waitUntil
instead of custom retry logic (4c8c13090) - Update test for app creation (9a3b44515)
- Update bundle size snapshot (76988ce97)
🤖 CI
- Remove double set of tests for docs prs (14c006ac4)
- Add workflow for discord team discussion threads (f14854fc3)
- Fix some syntax issues with discord + github integrations (c059f7cd1)
- Use token for adding issue to project (51661bac3)
- Use discord bot to create thread automatically (37f9eb27b)
- Only use discord bot (38ce2dcbb)
- Update format of discord message (0047b3059)
- Try bolding entire line (6e9f40eb9)
- Oops (8b044cad2)
- Add delay after adding each reaction (37b7e2108)
- Use last lts node version for testing (98719c065)
- Try npm trusted publisher (ea33502c3)
- Use npm trusted publisher for main releases (31a55437f)
- Change wording (#32979)
- Add github ai moderator (#33077)
❤️ Contributors
- Daniel Roe (@danielroe)
- abeer0 (@iiio2)
- Julien Huang (@huang-julien)
- kyumoon (@kyumoon)
- Alexander Lichter (@TheAlexLichter)
- Bobbie Goede (@BobbieGoede)
- mustafa60x (@mustafa60x)
- Matej Černý (@cernymatej)
- Alex Liu (@Mini-ghost)
- Amitav Chris Mostafa (@semibroiled)
- Romain Hamel (@romhml)
- Jacky Lam (@jackylamhk)
- Mukund Shah (@mukundshah)
- Luke Nelson (@luc122c)
- letianpailove (@letianpailove)
- Erwan Jugand (@erwanjugand)
- Alexander (@TheColorman)
- Ryota Watanabe (@wattanx)
- Yizack Rangel (@Yizack)
v4.0.3
4.0.3 is a regularly scheduled patch release.
👉 Changelog
🔥 Performance
- kit: Get absolute path from
tinyglobby
inresolveFiles
(#32846)
🩹 Fixes
- nuxt: Do not throw undefined
error
variable (#32807) - vite: Include tsconfig references during
typeCheck
(#32835) - nuxt: Add sourcemap path transformation for client builds (#32313)
- nuxt: Add warning for lazy-hydration missing prefix (#32832)
- nuxt: Trigger call once navigation even when no suspense (#32827)
- webpack: Handle
null
result from webpack call (84816d8a1) - kit,nuxt: Use
reverseResolveAlias
for better errors (#32853)
📖 Documentation
- Fix publicDir alias (#32841)
- Mention
bun.lock
for lockfile (#32820) - Add a section about augmenting types with TS project references (#32843)
- Improve explanation of global middleware (#32855)
🏡 Chore
- Update reproduction help text links (#32803)
- Update pnpm ignored build scripts (#32849)
- Improve internal types (052b98a35)
✅ Tests
- Move tests for
defineNuxtComponent
out of e2e test (#32848)
🤖 CI
- Move nightly releases into different concurrency group (664041be7)
❤️ Contributors
- RDistinct (@RDistinct)
- Daniel Roe (@danielroe)
- Oskar Lebuda (@OskarLebuda)
- Peter Budai (@peterbud)
- Matej Černý (@cernymatej)
- Damian Głowala (@DamianGlowala)
- Bobbie Goede (@BobbieGoede)
- Robin (@OrbisK)
- abeer0 (@iiio2)
- Julien Huang (@huang-julien)
v3.18.1
3.18.1 is a regularly scheduled patch release.
👉 Changelog
🔥 Performance
- kit: Get absolute path from
tinyglobby
inresolveFiles
(#32846)
🩹 Fixes
- nuxt: Do not throw undefined
error
variable (#32807) - vite: Include tsconfig references during
typeCheck
(#32835) - nuxt: Add sourcemap path transformation for client builds (#32313)
- nuxt: Add warning for lazy-hydration missing prefix (#32832)
- nuxt: Trigger call once navigation even when no suspense (#32827)
- webpack: Handle
null
result from webpack call (65aa17158) - kit,nuxt: Use
reverseResolveAlias
for better errors (#32853)
📖 Documentation
🏡 Chore
- Update reproduction help text links (#32803)
- Update pnpm ignored build scripts (#32849)
- Improve internal types (f271c66c4)
✅ Tests
- Move tests for
defineNuxtComponent
out of e2e test (#32848)
🤖 CI
- Move nightly releases into different concurrency group (26f9baa6a)
❤️ Contributors
- RDistinct (@RDistinct)
- Daniel Roe (@danielroe)
- Oskar Lebuda (@OskarLebuda)
- Peter Budai (@peterbud)
- Matej Černý (@cernymatej)
- Damian Głowala (@DamianGlowala)
- Bobbie Goede (@BobbieGoede)
- Robin (@OrbisK)
- Bobby (@xanzhu)
v4.0.2
4.0.2 is the next patch release.
Timetable: 28 July.
👉 Changelog
🩹 Fixes
- nuxt: Provide typed slots for
<ClientOnly>
and<DevOnly>
(#32707) - kit,nuxt,schema: Add trailing slash to some dir aliases (#32755)
- nuxt: Constrain global
defineAppConfig
type (#32760) - kit: Include module types in
app
context (#32758) - nuxt: Include source base url for remote islands (#32772)
- vite: Use vite node server to transform requests (#32791)
- kit: Use
mlly
to parse module paths (#32386) - nuxt: Execute all plugins after error rendering error.vue (#32744)
📖 Documentation
- Update Nuxt installation command to use
npm create nuxt@latest
(#32726) - Add AI-assisted contribution guidelines (#32725)
- Hydration best practice (#32746)
- Add example for module
.with()
(#32757) - Replace dead Vue Router docs links (#32779)
- Update nightly version references (#32776)
🏡 Chore
- Update reproduction links for bug-report template (#32722)
- Update
unbuild
and use absolute path in dev stubs (#32759)
✅ Tests
- Ignore vue
module.exports
export (c4317e057)
🤖 CI
- Release
pkg.pr.new
formain
/3.x
branches as well (b0f289550) - Apply
3x
tag to latest v3 release (5f6c27509)
❤️ Contributors
- Daniel Roe (@danielroe)
- Bobbie Goede (@BobbieGoede)
- Damian Głowala (@DamianGlowala)
- Bobby (@xanzhu)
- Dog (@dgxo)
- Julien Huang (@huang-julien)
- Stephen Jason Wang (@stephenjason89)
- Mateleo (@Mateleo)
- Robin (@OrbisK)
- Alex Liu (@Mini-ghost)
v3.18.0
3.18.0 is the next minor release.
👀 Highlights
A huge thank you to everyone who's been a part of this release, which is mostly about backporting features + bugfixes from Nuxt v4.
Over the next six months, we'll continue backporting compatible v4 features and bug fixes, so please keep the feedback coming! ❤️
🧪 Lazy Hydration Macros
Building on the delayed hydration support from v3.16, we now support lazy hydration macros (#31192)! These provide a more ergonomic way to control component hydration:
<script setup lang="ts">
const LazyHydrationMyComponent = defineLazyHydrationComponent(
'visible',
() => import('./components/MyComponent.vue')
)
</script>
<template>
<div>
<!--
Hydration will be triggered when
the element(s) is 100px away from entering the viewport.
-->
<LazyHydrationMyComponent :hydrate-on-visible="{ rootMargin: '100px' }" />
</div>
</template>
These macros make it possible to use Nuxt's lazy hydration utilities alongside explicit component imports.
♿️ Accessibility Improvements
We've enhanced accessibility by including <NuxtRouteAnnouncer>
in the built-in app.vue
(#32621). This means page changes will be announced to screen readers, making navigation more accessible for users with visual impairments. (This only applies if you do not have an app.vue
in your project. If you do, please keep <NuxtRouteAnnouncer>
in your app.vue
!)
🛠️ Enhanced Development Experience
Chrome DevTools Workspace Integration
We've added Chrome DevTools workspace integration (#32084), allowing you to edit your Nuxt source files directly from Chrome DevTools. This creates a better debugging experience where changes made in DevTools are reflected in your actual source files.
Better Component Type Safety
Component type safety has been improved with:
- Typed slots for
<ClientOnly>
and<DevOnly>
(#32707) - better IntelliSense and error checking - Exported
<NuxtTime>
prop types (#32547) - easier to extend and customize
New Auto-Import: onWatcherCleanup
The onWatcherCleanup
function from vue
is now available as an auto-import (#32396), making it easier to clean up watchers and prevent memory leaks:
const { data } = useAsyncData('users', fetchUsers)
watch(data, (newData) => {
const interval = setInterval(() => {
// Some periodic task
}, 1000)
// Clean up when the watcher is stopped
onWatcherCleanup(() => {
clearInterval(interval)
})
})
📊 Observability Enhancements
Page routes are now exposed to Nitro for observability (#32617), enabling better monitoring and analytics integration with supported platforms. This allows observability tools to track page-level metrics more effectively.
🔧 Module Development Improvements
Module authors get several quality-of-life improvements:
Simplified Server Imports
The addServerImports
kit utility now supports single imports (#32289), making it easier to add individual server utilities:
// Before: had to wrap in array
addServerImports([{ from: 'my-package', name: 'myUtility' }])
// Now: can pass directly
addServerImports({ from: 'my-package', name: 'myUtility' })
TypeScript Configuration
Modules can now add to typescript.hoist
(#32601), giving them more control over TypeScript configuration and type generation.
⚡️ Performance Improvements
We've made several performance optimizations:
- Improved Vite-node communication via internal socket (#32417) for faster development builds
- Migration to
oxc-walker
(#32250) and oxc foronPrehydrate
transforms (#32045) for faster code transformations
🐛 Bug Fixes
This release also includes several important fixes:
- Improved data fetching: When computed keys change, old data is now properly retained (#32616)
- Better scroll behavior:
scrollBehaviorType
is now only used for hash scrolling (#32622) - Fixed directory aliases: Added trailing slashes to some directory aliases for better consistency (#32755)
✅ 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.
👉 Changelog
🚀 Enhancements
- nuxt: Expose page routes to nitro for o11y (#32617)
- nuxt: Export
<NuxtTime>
prop types (#32547) - nuxt: Add integration with chrome devtools workspaces (#32084)
- kit: Support single import in
addServerImports
(#32289) - nuxt: Add
onWatcherCleanup
to imports presets (#32396) - nuxt: Add route announcer to default app.vue (#32621)
- nuxt: Support lazy hydration macros (#31192)
🔥 Performance
- vite: Communicate with vite-node via internal socket (#32417)
- kit: Update env expansion regex to match nitro (#30766)
🩹 Fixes
- nuxt: Allow modules to add to
typescript.hoist
(#32601) - nuxt: Retain old data when computed key changes (#32616)
- nuxt: Only use
scrollBehaviorType
for hash scrolling (#32622) - nuxt: Add missing
async
(fd312af03) - nuxt: Fix transform/minify types + bump oxc-transform (d2ba19963)
- nuxt: Provide typed slots for
<ClientOnly>
and<DevOnly>
(#32707) - kit,nuxt,schema: Add trailing slash to some dir aliases (#32755)
- nuxt: Include source base url for remote islands (#32772)
- vite: Use vite node server to transform requests (#32791)
- kit: Use
mlly
to parse module paths (#32386) - nuxt: Execute all plugins after error rendering error.vue (#32744)
💅 Refactors
- nuxt: Migrate to
oxc-walker
(#32250) - nuxt,schema: Use oxc for
onPrehydrate
transform (#32045) - nuxt: Pass file language directly to parser options (#32665)
- nuxt: Use direct import of
installNuxtModule
(228e3585e)
📖 Documentation
- Pass
v3
template to create nuxt examples (03182202f) - Add reference to
useNuxtData
in data fetching composable pages (#32589) - Document the --modules flag in the init command (#32599)
- Added new Shared folder to the example of v4 folder structure (#32630)
- Improve grammar (#32640)
- Typos (#32567)
- Fix abbreviation (#32613)
- Reference
noUncheckedIndexedAccess
rule change in v4 guide (#32643) - Fix links to Nitro docs (#32691)
- Add best practices section (#31609)
- Correct alias for local fonts in styling guide (#32680)
- Update nuxt.new links to v4 (#32639)
- Set correct default value for deep option in usefetch (#32724)
- Fix link to issue (ca03f533f)
- Add AI-assisted contribution guidelines (#32725)
- Update Nuxt installation command to use
npm create nuxt@latest
(#32726) - Hydration best practice (#32746)
- Add example for module
.with()
(#32757) - Replace dead Vue Router docs links (#32779)
🏡 Chore
- Handle missing commit details (0af98763d)
- Update reproduction links for bug-report template (#32722)
- Update
unbuild
and use absolute path in dev stubs (#32759)
✅ Tests
- Also assert status (4b4b224f7)
- Ignore vue `modu...