Nuxt 4.4 Ships Vue Router v5, Typed Layout Props, and 28x Faster Dev Routing

Nuxt 4.4 Ships Vue Router v5, Typed Layout Props, and 28x Faster Dev Routing

lschvn

Nuxt 4.4 landed on March 12, 2026, and it's one of the most substantial point releases in the 4.x cycle. The headline additions β€” Vue Router v5, custom useFetch factories, and an accessibility announcer composable β€” sit alongside a routing engine migration that dramatically speeds up the development experience.

Vue Router v5

The most significant dependency upgrade is Vue Router v5, which removes Nuxt's historical dependency on unplugin-vue-router. This is the first major vue-router bump since Nuxt 3 launched. For most applications, the upgrade should be transparent. If you were using unplugin-vue-router directly in other projects, you can remove it from your dependencies.

Typed routes are expected to exit experimental status in a future release β€” the groundwork is being laid now.

Custom useFetch / useAsyncData factories

This is the feature that module authors and API-heavy applications will reach for first. createUseFetch lets you instantiate a fully-typed fetch client with your own defaults:

// composables/api.ts
export const useApiFetch = createUseFetch((currentOptions) => {
  const runtimeConfig = useRuntimeConfig()
  return {
    ...currentOptions,
    baseURL: currentOptions.baseURL ?? runtimeConfig.public.baseApiUrl,
  }
})
<!-- pages/dashboard.vue -->
<script setup lang="ts">
// baseURL from runtimeConfig applied automatically
const { data: users } = await useApiFetch('/users')
</script>

The factory function gives you full control over how options merge β€” including interceptors and composed headers. There's a matching createUseAsyncData for the same pattern.

Typed layout props

Layouts can now receive typed props directly from definePageMeta, without workarounds like provide/inject:

<!-- pages/dashboard.vue -->
definePageMeta({
  layout: {
    name: 'panel',
    props: {
      sidebar: true,
      title: 'Dashboard',
    },
  },
})
<!-- layouts/panel.vue -->
<script setup lang="ts">
defineProps<{
  sidebar?: boolean
  title?: string
}>()
</script>

If your layout defines props, you'll get full autocomplete and type-checking in definePageMeta.

Accessibility: useAnnouncer composable

Nuxt 4.4 ships a new useAnnouncer composable and <NuxtAnnouncer> component for dynamic in-page announcements β€” form submissions, loading states, search results that don't trigger navigation. Pair it with <NuxtRouteAnnouncer> for page-level navigation:

<template>
  <NuxtAnnouncer />
  <NuxtRouteAnnouncer />
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>

This is part of Nuxt's broader accessibility roadmap.

28x faster dev routing with unrouting

Nuxt migrated its file-system route generation to unrouting, which uses a trie data structure for route construction. Cold start is roughly the same (~8ms vs ~6ms for large apps), but hot-module replacement is dramatically faster: up to 28x faster when editing existing pages, and ~15% faster even when adding or removing pages. The system is also now deterministic β€” route generation is no longer sensitive to page file ordering.

Smarter ISR/SWR payload handling

Cached routes (ISR/SWR) with payload extraction had a problem: browser requests for _payload.json triggered a full SSR re-render, which in serverless environments could spin up a second lambda before the first response finished streaming. Nuxt 4.4 fixes this with a new payloadExtraction: 'client' mode that inlines the full payload in the initial HTML and adds a runtime in-memory LRU cache for subsequent _payload.json requests.

Other improvements

  • useCookie refresh option β€” extend a cookie's expiration without touching its value, useful for session management
  • clearNuxtState reset β€” now resets to the initial value instead of undefined, aligning with useAsyncData behavior
  • Import protection β€” improved error messages with suggested fixes when importing protected modules

FAQ

Is Vue Router v5 a breaking change? For most Nuxt apps, no. The upgrade should be transparent. Direct usage of unplugin-vue-router in other projects is the affected case.

When does payloadExtraction: 'client' become the default? With compatibilityVersion: 5 in a future release. The runtime LRU cache is active for all users immediately.

How do I try the new routing performance? It's automatic in 4.4. Edit any page file and observe HMR response in the terminal β€” the improvements are most visible in large applications with many route files.

Related articles

More coverage with overlapping topics and tags.

Vue 3.5: The 'Minor' Release That Rewrote the Rules of Frontend Performance
vue

Vue 3.5: The 'Minor' Release That Rewrote the Rules of Frontend Performance

Vue 3.5 arrived with no breaking changes and a set of internals improvements that should make any developer pay attention β€” 56% less memory usage, lazy hydration, and a stabilized reactive props API.
TypeScript 6.0 Lands as the Last Release Before the Go Rewrite
typescript

TypeScript 6.0 Lands as the Last Release Before the Go Rewrite

TypeScript 6.0 is out β€” and the Microsoft team is clear: it's a bridge release. The real story is what comes next: TypeScript 7, written in Go and already available as a preview, promises a 10x speedup.
ESLint v10 Drops Legacy Config β€” And the JS Ecosystem Is Taking Notes
javascript

ESLint v10 Drops Legacy Config β€” And the JS Ecosystem Is Taking Notes

ESLint's biggest breaking-change release in years finalises flat config, removes eslintrc support entirely, and adds JSX reference tracking. But the bigger story might be what's nipping at its heels.

Comments

Log in Log in to join the conversation.

No comments yet. Be the first to share your thoughts.