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.
<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 for onPrehydrate 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.
