Nuxt-Serverrouten und API-Endpunkte
Verzeichnis server/api/, defineEventHandler(), H3-Hilfsfunktionen, Middleware und Fehlerbehandlung
Nuxt-Serverrouten und API-Endpunkte ist eine kostenlose Vue Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Vue Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.
Nuxt ist Full-Stack
Nuxt 3 enthält eine Server-Engine (Nitro). Im Verzeichnis server/ können Sie API-Endpunkte neben Ihren Seiten erstellen – für viele Apps ist kein separates Backend erforderlich.
Das Verzeichnis server/api
Dateien in server/api/ werden zu API-Routen unter /api. server/api/hello.ts antwortet unter /api/hello.
server/
api/
hello.ts -> /api/hello
posts.ts -> /api/postsdefineEventHandler
Jede Serverroute exportiert einen Handler, der mit defineEventHandler erstellt wurde. Alles, was er zurückgibt, wird als Antwort gesendet und automatisch als JSON serialisiert.
// server/api/hello.ts
export default defineEventHandler((event) => {
return { message: 'Hello from the server' }
})Suffixe für HTTP-Methoden
Fügen Sie dem Dateinamen ein Methoden-Suffix hinzu, um die Route einzuschränken. users.get.ts verarbeitet GET, users.post.ts verarbeitet POST. Ohne Suffix antwortet die Route auf jede Methode.
server/api/
users.get.ts -> GET /api/users
users.post.ts -> POST /api/usersQuery-Parameter auslesen
Verwenden Sie den Helper getQuery, um den Query-String der URL aus dem Event auszulesen.
export default defineEventHandler((event) => {
const query = getQuery(event)
return { search: query.q }
})Den Request-Body auslesen
Bei POST-/PUT-Anfragen parst readBody den eingehenden JSON-Body. Die Funktion ist asynchron, verwenden Sie daher await.
export default defineEventHandler(async (event) => {
const body = await readBody(event)
return { received: body }
})Dynamische Serverrouten
Dateinamen in eckigen Klammern funktionieren auch auf dem Server. server/api/users/[id].get.ts liest die id mit getRouterParam aus.
export default defineEventHandler((event) => {
const id = getRouterParam(event, 'id')
return { id }
})HTTP-Fehler auslösen
Verwenden Sie createError, um anstelle eines einfachen Fehlers eine korrekte HTTP-Fehlerantwort mit Statuscode und Nachricht zurückzugeben.
export default defineEventHandler((event) => {
const id = getRouterParam(event, 'id')
if (!id) {
throw createError({ statusCode: 400, statusMessage: 'Missing id' })
}
})Das H3-Event-Objekt
Das Argument event stammt aus H3, dem HTTP-Framework von Nitro. Es enthält Request und Response und ist der Einstiegspunkt für alle Helper-Funktionen.
Status und Header setzen
Mit Helpern wie setResponseStatus und setHeader können Sie die Antwort steuern, wenn die Rückgabe eines Werts nicht ausreicht.
export default defineEventHandler((event) => {
setResponseStatus(event, 201)
setHeader(event, 'Cache-Control', 'no-cache')
return { created: true }
})Ihre API von Seiten aus aufrufen
Rufen Sie Ihren eigenen Endpunkt von einer Seite aus mit useFetch oder $fetch ab. Während des SSR ruft Nuxt den Handler direkt auf und überspringt einen HTTP-Roundtrip.
const { data } = await useFetch('/api/posts')Schnelltest
Testen Sie Ihr Wissen über Serverrouten in Nuxt.
Zusammenfassung
Sie haben die Serverrouten von Nuxt gelernt:
- Dateien in server/api/ werden zu API-Endpunkten.
- defineEventHandler definiert einen Handler; sein Rückgabewert ist die Antwort.
- Die Suffixe .get.ts/.post.ts beschränken die HTTP-Methode.
- Verwenden Sie getQuery, readBody, getRouterParam und createError für das H3-Event.
Lerne HTML mit einem KI-Tutor — kostenlos
Schreibe und führe echten Code in deinem Browser aus, bekomme sofortige Hilfe von einem 24/7 KI-Tutor und setze dein Lernen im Web oder in der App fort.
- Kurse
- 42
- Lektionen
- 156
Häufig gestellte Fragen
Ist die Lektion „Nuxt-Serverrouten und API-Endpunkte“ kostenlos?
Ja — der vollständige Text von „Nuxt-Serverrouten und API-Endpunkte“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Vue Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Nuxt-Serverrouten und API-Endpunkte“?
Verzeichnis server/api/, defineEventHandler(), H3-Hilfsfunktionen, Middleware und Fehlerbehandlung Du übst Vue Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Vue Academy zu starten?
Keine Vorkenntnisse erforderlich. Vue Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 4.
Wie lange dauert die Lektion „Nuxt-Serverrouten und API-Endpunkte“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Vue Academy-Lektion Code schreiben und ausführen?
Ja. Jede Vue Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Nuxt-3-Projektstruktur und dateibasierte Routen
- Daten abrufen: useFetch und useAsyncData
- Nuxt-Serverrouten und API-Endpunkte
- SSR vs. SSG vs. SPA-Modus