Nuxt 4.4 erschien am 12. März 2026, und es ist eines der substantiellsten Point-Releases im 4.x-Zyklus. Die Headline-Additionen, Vue Router v5, Custom-useFetch-Factories und ein Accessibility-Announcer-Composable, stehen neben einer Routing-Engine-Migration, die die Entwicklererfahrung drastisch beschleunigt.
Vue Router v5
Die wichtigste Abhängigkeitsaktualisierung ist Vue Router v5, das Nuxts historische Abhängigkeit von unplugin-vue-router entfernt. Dies ist das erste größere vue-router-Upgrade seit dem Start von Nuxt 3. Für die meisten Anwendungen sollte das Upgrade transparent sein. Wenn Sie unplugin-vue-router direkt in anderen Projekten verwenden, können Sie es aus Ihren Abhängigkeiten entfernen.
Typisierte Routen sollen in einem zukünftigen Release den experimentellen Status verlassen, die Grundlagen werden gerade gelegt.
Custom useFetch / useAsyncData Factories
Dies ist die Funktion, die Modulautoren und API-reiche Anwendungen zuerst verwenden werden. createUseFetch ermöglicht es, einen vollständig typisierten Fetch-Client mit eigenen Standardwerten zu instanziieren:
// 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 von runtimeConfig automatisch angewendet
const { data: users } = await useApiFetch('/users')
</script>
Die Factory-Funktion gibt Ihnen volle Kontrolle darüber, wie Optionen zusammengeführt werden, einschließlich Interceptors und zusammengesetzter Headers. Es gibt einen passenden createUseAsyncData für dasselbe Muster.
Typisierte Layout-Props
Layouts können jetzt direkt von definePageMeta typisierte Props empfangen, ohne Workarounds wie 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>
Wenn Ihr Layout Props definiert, erhalten Sie vollständigen Autocomplete und Typprüfung in definePageMeta.
Barrierefreiheit: useAnnouncer-Composable
Nuxt 4.4 führt ein neues useAnnouncer-Composable und die <NuxtAnnouncer>-Komponente für dynamische In-Page-Ankündigungen ein, Formularübermittlungen, Ladezustände, Suchergebnisse ohne Navigation. Kombinieren Sie es mit <NuxtRouteAnnouncer> für seitenübergreifende Navigation:
<template>
<NuxtAnnouncer />
<NuxtRouteAnnouncer />
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
</template>
Dies ist Teil von Nuxts breiterer Barrierefreiheits-Roadmap.
28x schnelleres Dev-Routing mit unrouting
Nuxt hat seine Dateisystem-Routengenerierung zu unrouting migriert, das eine Trie-Datenstruktur für den Routenbau verwendet. Cold Start ist ungefähr gleich (~8ms vs ~6ms für große Apps), aber Hot-Module-Replacement ist dramatisch schneller: bis zu 28x schneller beim Bearbeiten bestehender Seiten, und ~15% schneller selbst beim Hinzufügen oder Entfernen von Seiten. Das System ist jetzt auch deterministisch, die Routengenerierung ist nicht mehr empfindlich gegenüber der Reihenfolge der Seitendateien.
Intelligentere ISR/SWR-Payload-Verarbeitung
Gecachte Routen (ISR/SWR) mit Payload-Extraktion hatten ein Problem: Browser-Anfragen nach _payload.json lösten einen vollständigen SSR-Re-Render aus, was in serverlosen Umgebungen eine zweite Lambda-Instanz starten konnte, bevor die erste Antwort mit dem Streaming fertig war. Nuxt 4.4 behebt dies mit einem neuen payloadExtraction: 'client'-Modus, der die vollständige Payload in die ursprüngliche HTML-Antwort inlined und einen Runtime-In-Memory-LRU-Cache für nachfolgende _payload.json-Anfragen hinzufügt.
Weitere Verbesserungen
useCookierefresh-Option: verlängern Sie die Ablaufzeit eines Cookies, ohne seinen Wert zu ändern, nützlich für Session-ManagementclearNuxtState-Reset: setzt jetzt auf den Initialwert statt aufundefinedzurück, in Übereinstimmung mit dem Verhalten vonuseAsyncData- Import-Schutz: verbesserte Fehlermeldungen mit Lösungsvorschlägen beim Importieren geschützter Module
FAQ
Ist Vue Router v5 ein Breaking Change?
Für die meisten Nuxt-Apps: nein. Das Upgrade sollte transparent sein. Die direkte Verwendung von unplugin-vue-router in anderen Projekten ist der betroffene Fall.
Wann wird payloadExtraction: 'client' zum Standard?
Mit compatibilityVersion: 5 in einem zukünftigen Release. Der Runtime-LRU-Cache ist für alle Benutzer sofort aktiv.
Wie teste ich die neuen Routing-Performance-Verbesserungen? Sie sind automatisch in 4.4. Bearbeiten Sie eine Seitendatei und beobachten Sie die HMR-Antwort im Terminal, die Verbesserungen sind am deutlichsten in großen Anwendungen mit vielen Routendateien.
