Nuxt

Was ist Nuxt?

Nuxt ist das Vue Meta-Framework. Während Vue dir Komponenten und Reaktivität bietet, fügt Nuxt die Teile hinzu, die jede echte Anwendung benötigt – Routing, Server Rendering, Data Fetching, eine Server-Runtime und ein Modul-Ökosystem – und verbindet diese mit sinnvollen Standardeinstellungen.

Es ist das Vue-Gegenstück zu Next.js und folgt derselben grundlegenden Philosophie: Nutzung des Dateisystems für das Routing, standardmäßig Server-Rendering und die Behandlung von Data Fetching als zentrales Anliegen. Wenn du Vue bereits beherrschst, fühlt sich Nuxt eher wie ein natürlicher nächster Schritt an als wie ein komplett neues Framework.

Dateibasiertes Routing

Dateien in pages/ werden zu Routen. Dynamische Segmente werden durch eckige Klammern definiert, und verschachtelte Ordner erstellen verschachtelte Routen.

pages/
├── index.vue            # /
├── about.vue            # /about
├── blog/
│   ├── index.vue        # /blog
│   └── [slug].vue       # /blog/:slug
└── dashboard/
    ├── index.vue        # /dashboard
    └── settings.vue     # /dashboard/settings

<!-- pages/blog/[slug].vue -->
<script setup>
const route = useRoute();
const { data: post } = await useFetch(`/api/posts/${route.params.slug}`);
</script>

<template>
  <article>
    <h1>{{ post.title }}</h1>
    <div v-html="post.body" />
  </article>
</template>

useRoute liefert die aktuelle Route, und NuxtLink übernimmt die clientseitige Navigation inklusive Prefetching. Layouts in layouts/ umschließen Seiten und ermöglichen es, eine gemeinsame Shell über mehrere Routen hinweg zu nutzen.

Auto-imports

Nuxt importiert automatisch die Vue-APIs, seine eigenen Composables sowie deine Komponenten und Composables. Dadurch schreibst du weniger Boilerplate und deine Dateien bleiben fokussiert.

<!-- components/UserCard.vue -->
<script setup>
const props = defineProps({ user: Object });
</script>

<template>
  <article class="card">
    <h3>{{ user.name }}</h3>
  </article>
</template>

Komponenten in components/ sind überall verfügbar, ohne dass sie importiert werden müssen, und auch deine eigenen Composables in composables/ werden automatisch importiert. Das Ergebnis ist weniger Overhead und kürzere Import-Listen, die gepflegt werden müssen.

Datenabruf mit useFetch

useFetch und useAsyncData sind der empfohlene Weg, um Daten zu laden. Sie werden während des Server-Renderings ausgeführt, übertragen das Ergebnis an den Client und stellen den Lade- sowie Fehlerstatus bereit.

<!-- pages/posts.vue -->
<script setup>
const { data: posts, pending, error } = await useFetch("/api/posts");
</script>

<template>
  <p v-if="pending">Loading…</p>
  <p v-else-if="error">Could not load posts.</p>
  <PostList v-else :posts="posts" />
</template>

Da die Anfrage auf dem Server erfolgt, enthält der erste Paint bereits die Daten. Das vermeidet das kurze Aufblitzen von leerem Inhalt, das beim Abrufen in onMounted auftritt, und es funktioniert mit Caching, Revalidation und benutzerdefinierten Keys für eine präzisere Steuerung.

Der Nitro-Server

Nuxt enthält eine Server-Engine namens Nitro. Dateien in server/api/ werden zu API-Endpunkten, und server/routes/ können benutzerdefinierte Handler bereitstellen.

// server/api/users.get.ts
export default defineEventHandler(async () => {
  const config = useRuntimeConfig();
  return $fetch("https://api.example.com/users", {
    headers: { Authorization: config.apiKey },
  });
});

// server/api/users.post.ts
export default defineEventHandler(async (event) => {
  const body = await readBody(event);
  const user = await db.user.create({ data: body });
  return { user };
});

Dadurch bleiben Secrets und Zugangsdaten von Drittanbietern auf dem Server. Der Client ruft Ihren eigenen Endpunkt auf, und Nitro erledigt den Rest. Dieselbe Engine ermöglicht das Deployment auf Node, serverless functions, edge runtimes und statische Hosts über entsprechende Adapter.

SEO, Meta und Module

Nuxt macht serverfreundliches SEO mithilfe von Composables denkbar einfach.

<!-- pages/about.vue -->
<script setup>
useSeoMeta({
  title: "About us",
  description: "Who we are and what we build.",
  ogImage: "/og/about.png",
});
</script>

Die Composables useHead und useSeoMeta verwalten Titel, Beschreibungen, canonical URLs und Social Tags. Da sie korrekt auf dem Server gerendert werden, können Crawler diese problemlos auslesen. Darüber hinaus erweitert das Nuxt-Modul-Ökosystem die Funktionalität um Authentifizierung, Content, Bilder, Analytics und mehr – oft mit nur ein oder zwei Zeilen Konfiguration.

Rendering-Modi

Nuxt unterstützt verschiedene Rendering-Strategien, die Sie pro Route auswählen können:

• Universal (SSR) rendert auf dem Server und führt die Hydrierung auf dem Client durch — dies ist der Standard.
• Static (SSG) rendert Seiten bereits zur Build-Zeit vor.
• SPA rendert vollständig auf dem Client, wie eine klassische Vue-App.
• Hybrid kombiniert diese Ansätze, sodass beispielsweise Marketing-Seiten statisch sein können, während ein Dashboard clientseitig gerendert wird.

Sie können zudem Incremental Static Regeneration und Route Rules aktivieren, um Caching und Rendering feinabzustimmen, ohne die App-Struktur ändern zu müssen.

Best Practices

• Verwende useFetch und useAsyncData anstatt Daten in onMounted abzurufen.
• Halte Secrets und Aufrufe von Drittanbietern in server/api routes.
• Lass Auto-Imports ihre Arbeit machen; versuche nicht, sie mit manuellen Imports zu überschreiben.
• Definiere SEO-Metadaten mit useSeoMeta auf jeder Seite.
• Wähle einen Rendering-Modus pro Route, anstatt einen einzigen Modus für die gesamte Anwendung.
• Nutze NuxtLink für die interne Navigation, damit Prefetching und Übergänge korrekt funktionieren.
• Organisiere wiederverwendbare Logik in Composables innerhalb von composables/.

Häufige Fehler

• Daten in onMounted abrufen und dadurch die Vorteile von SSR verlieren.
• API-Keys preisgeben, indem Drittanbieter direkt vom Client aus aufgerufen werden.
• Zu einem globalen Store greifen, obwohl useState oder ein Composable ausreichen würden.
• Route-Regeln ignorieren und Seiten übermäßig rendern, die statisch sein könnten.
• Davon ausgehen, dass Nuxt 2 Modul-APIs in Nuxt 3 unverändert funktionieren.
• SEO-Metadaten vergessen, weil das Framework es einem zu einfach macht, sie zu übersehen.

Wie geht es weiter?

Nuxt macht Vue zu einer Full-Stack-Plattform. Vertiefe dein Wissen in Vue, füge TypeScript hinzu und vergleiche den Ansatz mit Next.js und SvelteKit. Baue anschließend eine kleine App mit einer Seite, einer Server-Route und useFetch, um ein Gefühl dafür zu bekommen, wie natürlich die einzelnen Teile ineinandergreifen.