Kapitel 5: Seiten & Ansichten

In diesem Kapitel lernen Sie, wie Sie Seiten in Nuxt 3 erstellen, Komponenten verwenden und Meta-Tags für SEO konfigurieren.

---

5.1 Seitenkomponenten erstellen

Seitenkomponenten befinden sich im pages/-Verzeichnis und repräsentieren die einzelnen Routen Ihrer Anwendung.

Einfache Seite (pages/about.vue):

<script setup>
// Kein manueller Import erforderlich!
const title = 'Über uns'
</script>

<template>
  <div class="about-page">
    <h1>{{ title }}</h1>
    <p>Wir sind ein tolles Team aus Entwicklern.</p>
    <p>Unser Ziel ist es, tolle Webanwendungen zu bauen.</p>
  </div>
</template>

<style scoped>
.about-page {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}
</style>

Öffnen Sie die Seite im Browser.

---

5.2 Komponenten-Auto-Import

Eines der stärksten Features von Nuxt 3 ist der automatische Import von Komponenten.

Beispiel:

Schritt 1: Komponente erstellen (components/MyButton.vue)

<template>
  <button class="my-button">
    <slot></slot>
  </button>
</template>

<style scoped>
.my-button {
  background: #00dc82;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
}
</style>

Schritt 2: Komponente auf einer Seite verwenden

<!-- pages/index.vue -->
<template>
  <div>
    <h1>Willkommen!</h1>
    <!-- Kein Import erforderlich! -->
    <MyButton>Klick mich!</MyButton>
  </div>
</template>

---

5.3 Komponenten-Schichtung (Best Practices)

Für gut strukturierte Projekte sollten Sie Komponenten in drei Kategorien unterteilen:

1. Globale Komponenten (components/)

• Wiederverwendbare UI-Elemente
• Beispiele: Button.vue, Input.vue, Modal.vue

2. Seitenkomponenten (components/)

• Spezifisch für eine Seite
• Beispiele: HeroSection.vue, ProductCard.vue

3. Layout-Komponenten (layouts/)

• Globale Struktur (Header, Footer, Sidebar)
• Beispiel: default.vue, admin.vue

Beispiel: layouts/default.vue

<template>
  <div>
    <AppHeader />
    <main>
      <slot />  <!-- Hier wird die Seite eingefügt -->
    </main>
    <AppFooter />
  </div>
</template>

---

5.4 Statische Assets verarbeiten

Nuxt 3 unterstützt zwei Arten von statischen Assets:

1. public/-Verzeichnis (Direkter Zugriff)

• Dateien sind unter der Root-URL verfügbar
• Beispiel: public/logo.png → /logo.png

Verwendung in Templates:

<template>
  <img src="/logo.png" alt="Logo" />
</template>

---

2. assets/-Verzeichnis (Verarbeitet)

• Dateien werden von Vite optimiert
• SCSS, LESS, Bilder, Fonts

Beispiel: Bild importieren

<script setup>
import logo from '~/assets/img/logo.png'
</script>

<template>
  <img :src="logo" alt="Logo" />
</template>

Beispiel: SCSS-Datei importieren

<style lang="scss">
@use '~/assets/scss/main.scss';
</style>

---

5.5 Meta-Tags konfigurieren (useHead())

Für SEO (Suchmaschinenoptimierung) und Social Media Sharing (Open Graph) müssen Sie Meta-Tags konfigurieren.

Methode 1: useHead() Composable

<script setup>
useHead({
  title: 'Meine Nuxt App - Startseite',
  meta: [
    { name: 'description', content: 'Dies ist eine tolle Nuxt 3 Anwendung.' },
    { name: 'keywords', content: 'Nuxt, Vue, JavaScript, SSR' },
    { property: 'og:title', content: 'Meine Nuxt App' },
    { property: 'og:description', content: 'Tolle Nuxt 3 Anwendung mit SEO!' }
  ],
  link: [
    { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
  ]
})
</script>

---

Methode 2: useSeoMeta() (Spezialisiert für SEO)

<script setup>
useSeoMeta({
  title: 'Meine Nuxt App',
  description: 'Eine tolle Nuxt 3 Anwendung',
  ogTitle: 'Meine Nuxt App',
  ogDescription: 'Tolle Nuxt 3 Anwendung mit SEO!',
  ogImage: 'https://example.com/image.png',
  twitterCard: 'summary_large_image'
})
</script>

---

5.6 Fortgeschrittene Meta-Konfiguration

Dynamische Titel für verschiedene Seiten:

app.vue (Globaler Titel-Template):

<script setup>
useHead({
  titleTemplate: '%s - Meine Nuxt App'  // %s wird durch Seitentitel ersetzt
})
</script>

pages/about.vue (Seiten-spezifisch):

<script setup>
useHead({
  title: 'Über uns'  // Ergibt: "Über uns - Meine Nuxt App"
})
</script>

---

5.7 Zusammenfassung

In diesem Kapitel haben Sie gelernt:

• ✅ Seitenkomponenten im pages/-Verzeichnis zu erstellen
• ✅ Den Auto-Import-Mechanismus für Komponenten zu nutzen
• ✅ Komponenten zu strukturieren (global, seiten-spezifisch, layouts)
• ✅ Statische Assets in public/ und assets/ zu verwalten
• ✅ Meta-Tags für SEO mit useHead() und useSeoMeta() zu konfigurieren

Nächste Schritte: Im nächsten Kapitel lernen wir Datenabfrage & Zustandsverwaltung – wie man Daten von APIs lädt und den Anwendungszustand verwaltet.

---

📚 Weiterführende Ressourcen

• Nuxt 3 Pages Dokumentation
• Components Dokumentation
• useHead() API
• SEO & Meta Dokumentation

---

Nächstes Kapitel: Kapitel 6: Datenabfrage & Zustandsverwaltung →