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: