0Pricing
Vue Academy · Lektion

Nuxt-3-Projektstruktur und dateibasierte Routen

Automatische Importe aus pages/, layouts/ und components/, Dateibenennung für verschachtelte Routen und Catch-all-Routen

Nuxt-3-Projektstruktur und dateibasierte Routen ist eine kostenlose Vue Academy-Lektion auf CoddyKit. Dies ist Lektion 1 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.

Was ist Nuxt 3?

Nuxt 3 ist ein auf Vue 3 aufbauendes Meta-Framework. Es ergänzt serverseitiges Rendering, dateibasierte Routen, automatische Importe und eine Server-Engine, sodass Sie Full-Stack-Vue-Apps mit nahezu keiner Konfiguration erstellen können.

Das pages-Verzeichnis

Das Verzeichnis pages/ steuert das Routing. Jede .vue-Datei wird automatisch zu einer Route – eine manuelle Router-Konfiguration ist nicht erforderlich. pages/about.vue wird auf /about abgebildet.

pages/
  index.vue      ->  /
  about.vue      ->  /about
  contact.vue    ->  /contact

Den Router aktivieren

Der Router wird aktiviert, sobald ein Verzeichnis pages/ vorhanden ist. Fügen Sie <NuxtPage /> in app.vue ein, um die passende Seite zu rendern.

<!-- app.vue -->
<template>
  <NuxtPage />
</template>

Verschachtelte Routen

Ordner erzeugen verschachtelte Pfade. pages/blog/index.vue stellt /blog bereit, und pages/blog/archive.vue stellt /blog/archive bereit.

pages/
  blog/
    index.vue    ->  /blog
    archive.vue  ->  /blog/archive

Dynamische Segmente mit [id]

Setzen Sie einen Dateinamen in eckige Klammern, um ein dynamisches Segment zu erstellen. pages/users/[id].vue entspricht /users/42 und stellt die id als Routenparameter bereit.

// pages/users/[id].vue
const route = useRoute()
const id = route.params.id // "42"

Catch-all mit [...slug]

Die Spread-Form [...slug].vue ist ein Catch-all. Sie entspricht Pfaden beliebiger Tiefe und eignet sich ideal für CMS-Inhalte oder eine individuelle 404-Behandlung.

pages/
  [...slug].vue  ->  /a, /a/b, /a/b/c ...

Das layouts-Verzeichnis

Der Ordner layouts/ enthält Wrapper-Komponenten, die von mehreren Seiten gemeinsam verwendet werden – Header, Seitenleisten und Fußzeilen. layouts/default.vue umschließt jede Seite, sofern dies nicht überschrieben wird.

<!-- layouts/default.vue -->
<template>
  <header>My Site</header>
  <slot />
</template>

Ein Layout auswählen

Eine Seite wählt ein Layout mit definePageMeta aus. Der Slot im Layout rendert den Seiteninhalt.

<script setup>
definePageMeta({ layout: 'admin' })
</script>

Automatisch importierte Komponenten

Alles in components/ wird automatisch importiert – eine Import-Anweisung ist nicht erforderlich. Verschachtelte Ordner werden dem Namen vorangestellt: Aus components/base/Button.vue wird <BaseButton />.

components/
  TheHeader.vue   ->  <TheHeader />
  base/Button.vue ->  <BaseButton />

Automatisch importierte Composables

Auch das Verzeichnis composables/ wird automatisch importiert. Dort exportierte Funktionen sowie Nuxt-eigene Funktionen wie useFetch können überall ohne Importe verwendet werden.

// composables/useCounter.ts
export const useCounter = () => useState("c", () => 0)
// usable in any component without importing

Weitere wichtige Verzeichnisse

Nuxt definiert außerdem plugins/ (werden beim Start ausgeführt), middleware/ (Routenwächter), server/ (API- und Serverlogik) und public/ (statische Assets, die unverändert bereitgestellt werden).

Schnelltest

Testen Sie Ihr Wissen über die Nuxt-Struktur und das Routing.

Zusammenfassung

Sie haben die Nuxt-Struktur kennengelernt:

  • pages/ stellt dateibasiertes Routing bereit; Ordner verschachteln Routen.
  • [id] ist ein dynamisches Segment, [...slug] ein Catch-all.
  • layouts/ umschließt Seiten und wird über definePageMeta ausgewählt.
  • components/ und composables/ werden automatisch importiert.

Häufig gestellte Fragen

Ist die Lektion „Nuxt-3-Projektstruktur und dateibasierte Routen“ kostenlos?

Ja — der vollständige Text von „Nuxt-3-Projektstruktur und dateibasierte Routen“ 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-3-Projektstruktur und dateibasierte Routen“?

Automatische Importe aus pages/, layouts/ und components/, Dateibenennung für verschachtelte Routen und Catch-all-Routen 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 1 von 4.

Wie lange dauert die Lektion „Nuxt-3-Projektstruktur und dateibasierte Routen“?

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

  1. Nuxt-3-Projektstruktur und dateibasierte Routen
  2. Daten abrufen: useFetch und useAsyncData
  3. Nuxt-Serverrouten und API-Endpunkte
  4. SSR vs. SSG vs. SPA-Modus
← Zurück zu Vue Academy