Nuxt 4.4: Vue Router v5, createUseFetch, and a Big Accessibility Win
Nuxt 4.4 ships Vue Router v5, composable factories for useFetch, typed layout props, a new useAnnouncer composable, and smarter SSR payload handling. Here's what changed and why it matters.
Nuxt 4.4 landed on March 12, 2026 — and it's a release worth looking at carefully. While there are no dramatic breaking changes, the improvements are the kind that compound over time: cleaner fetch abstractions, better accessibility primitives, fully-typed layout props, and a meaningful routing upgrade.
Here's a breakdown of everything notable.
createUseFetch and createUseAsyncData
The headline feature. You can now create custom, pre-configured instances of useFetch and useAsyncData — complete with your own defaults — and use them exactly like the originals.
// composables/api.ts
// Client-only fetching with a single line
export const useClientFetch = createUseFetch({
server: false,
})
// Dynamic defaults with full control
export const useApiFetch = createUseFetch((currentOptions) => {
const runtimeConfig = useRuntimeConfig()
return {
...currentOptions,
baseURL: currentOptions.baseURL ?? runtimeConfig.public.baseApiUrl,
}
})
Usage stays identical to the built-in:
<script setup lang="ts">
const { data: users } = await useApiFetch('/users')
</script>
This is a pattern most teams were previously solving with wrapper composables or plugin injection. Now it's first-class, auto-scanned from your composables/ directory, and works seamlessly with SSR. The same pattern applies to createUseAsyncData.
Vue Router v5
Nuxt 4.4 upgrades to Vue Router v5 — the first major router version bump since Nuxt 3. The practical impact is mostly transparent: most apps won't notice a thing.
What does change: unplugin-vue-router is no longer a peer dependency. If you were relying on it directly, you can now remove it. The next planned step is graduating typed routes out of experimental status, which this upgrade makes possible.
Typed Layout Props in definePageMeta
Previously, passing data to a layout from a page required provide/inject or other workarounds. That's now solved with native layout props support in definePageMeta:
// pages/dashboard.vue
definePageMeta({
layout: {
name: 'panel',
props: {
sidebar: true,
title: 'Dashboard',
},
},
})
And in your layout:
<!-- layouts/panel.vue -->
<script setup lang="ts">
defineProps<{
sidebar?: boolean
title?: string
}>()
</script>
Even better: the props are fully typed. If your layout defines typed props, you'll get autocomplete and type-checking inside definePageMeta. This is the kind of DX improvement that makes Nuxt feel more like a coherent framework rather than a collection of parts.
useAnnouncer — Accessibility as a First-Class Concern
One of the most underrated additions: a new useAnnouncer composable and <NuxtAnnouncer> component for screen reader announcements. This goes beyond page navigation (which useRouteAnnouncer already handled) to cover dynamic in-page changes: form submissions, loading states, search results.
<script setup lang="ts">
const { polite, assertive } = useAnnouncer()
async function submitForm() {
try {
await $fetch('/api/contact', { method: 'POST', body: formData })
polite('Message sent successfully')
} catch (error) {
assertive('Error: Failed to send message')
}
}
</script>
polite waits for the user to finish what they're doing before announcing. assertive interrupts immediately — reserved for errors that need immediate attention. The component auto-injects a live region into your app when you add <NuxtAnnouncer /> to app.vue.
Accessibility in web frameworks is often an afterthought. Making it this easy to get right is a meaningful step.
Smarter SSR Payload Handling
A less flashy but important improvement: a new payloadExtraction: 'client' mode that inlines the full payload into the initial HTML response while still generating _payload.json for client-side navigation. Paired with a runtime in-memory LRU cache, this reduces redundant payload fetching on repeat visits.
For data-heavy server-rendered apps, this can meaningfully improve perceived performance without any code changes.
Upgrading
Nuxt 4.4.0 is available now. The release is also labeled 4.4.2 (4.4.1 was a no-op republish due to a publishing failure — nothing changed in that bump).
npx nuxi upgrade
For most apps, this is a straightforward drop-in upgrade. The Vue Router v5 change is the only thing to watch if you have unplugin-vue-router as a direct dependency.
Full release notes: github.com/nuxt/nuxt/releases/tag/v4.4.0