Erste Schritte mit Nuxt 4

Nuxt 4 bringt einige spannende Neuerungen mit sich. Nach langer Entwicklungszeit ist das Release endlich da und macht die Entwicklung von Vue-Anwendungen noch angenehmer. In diesem Artikel werfen wir einen Blick auf die wichtigsten Änderungen und zeigen, wie du dein bestehendes Projekt migrierst.

Das neue app/-Verzeichnis

Die auffälligste Änderung: Statt alles im Projektroot zu verteilen, liegt der Anwendungscode jetzt zentral unter app/. Das sorgt für eine klarere Struktur und trennt Framework-Konfiguration (Root) von Anwendungscode (app/).

Ein typisches Nuxt 4 Projekt sieht so aus:

nuxt.config.ts
app/
  app.vue
  pages/
  components/
  layouts/
  assets/
  composables/
  data/
content/
public/

Vorteile dieser Struktur:

• Klarer Schnitt: Framework-Konfiguration vs. Anwendungslogik
• Skalierbarkeit: Auch bei vielen Dateien bleibt das Root übersichtlich
• Migration: nuxt prepare verschiebt vorhandene Dateien automatisch

Turbo-Modus

Nuxt 4 führt den Turbo-Modus ein. Dabei werden Seiten und Komponenten asynchron geladen, sobald der Nutzer mit ihnen interagiert. Die Navigation zwischen Seiten fühlt sich dadurch flüssiger an – ähnlich wie bei einer Single-Page-Application, aber ohne die Nachteile für SEO.

TypeScript-First

Nuxt 4 setzt noch stärker auf TypeScript. Viele APIs wurden typ-sicherer gemacht, was die Entwicklung angenehmer macht:

// useFetch ist jetzt voll typisiert
const { data } = await useFetch<MyType>("/api/endpoint")

// useRuntimeConfig liefert die richtigen Typen
const config = useRuntimeConfig()
// config.public.myKey ist automatisch typisiert

Der TypeScript-Support wurde nicht nur verbessert, sondern ist jetzt Standard: Jedes neue Nuxt-Projekt wird mit TypeScript ausgeliefert.

Performance

Durch verschiedene Optimierungen im Core läuft Nuxt 4 spürbar schneller – sowohl im Dev-Modus:

• Vite 7: Deutlich schnellere Modul-Auflösung und HMR
• Optimierte Serialisierung: Weniger Overhead bei der Server-Kommunikation
• Lazy Hydration: Komponenten werden nur hydriert, wenn sie im Viewport sind

als auch im Production-Build:

• Kleinere Bundles: Durch Tree-Shaking auf Komponenten-Ebene
• Schnellere Navigation: Prefetching von Seiten-Visits
• Optimierte Bildverarbeitung: Integration mit @nuxt/image ohne Extra-Konfiguration

Migration von Nuxt 3

Die Migration von Nuxt 3 auf 4 ist dank des integrierten Migrations-Tools einfach:

npx nuxi upgrade --force
nuxt prepare --migrate

Das Tool verschiebt automatisch Dateien, aktualisiert die Konfiguration und passt Import-Pfade an. In den meisten Fällen sind danach nur minimale manuelle Anpassungen nötig.