Kapitel 15: Häufige Fehler & Interviewfragen

In diesem Kapitel behandeln wir häufige Fehler, die Nuxt 3 Einsteiger machen, und bereiten uns auf Vorstellungsgespräche vor.

---

15.1 Häufige Fehler für Einsteiger

Fehler 1: Falsche Verwendung von useState()

❌ Falsch:

<script setup>
// Jedes Mal ein neuer Zustand!
const count = ref(0)
</script>

✅ Richtig:

<script setup>
// Globaler Zustand (geteilt zwischen Komponenten)
const count = useState('counter', () => 0)
</script>

Erklärung: useState() mit eindeutigem Schlüssel erstellt einen globalen, SSR-kompatiblen Zustand.

---

Fehler 2: Vergessen, dass localStorage nicht auf dem Server verfügbar ist

❌ Falsch:

<script setup>
// Funktioniert auf dem Server nicht!
const saved = localStorage.getItem('data')
</script>

✅ Richtig:

<script setup>
const saved = ref(null)

onMounted(() => {
  // Nur im Client ausführen!
  saved.value = localStorage.getItem('data')
})
</script>

Erklärung: Verwenden Sie process.client oder onMounted(), um sicherzustellen, dass Client-spezifische APIs verfügbar sind.

---

Fehler 3: Fehlende key-Parameter in useAsyncData()

❌ Falsch:

<script setup>
// Jedes Mal gleiche Daten (Caching-Problem!)
const { data } = await useAsyncData(() => $fetch('/api/posts'))
</script>

✅ Richtig:

<script setup>
// Eindeutiger Schlüssel für Caching
const { data } = await useAsyncData(
  'posts',
  () => $fetch('/api/posts')
)
</script>

Erklärung: Ohne key wird Nuxt einen automatischen Schlüssel generieren, der möglicherweise zu Caching-Problemen führt.

---

Fehler 4: useRouter() außerhalb von <script setup> verwenden

❌ Falsch:

<script setup>
// Funktioniert nicht!
const router = useRouter()
</script>

<template>
  <button @click="router.push('/')">Home</button>
</template>

✅ Richtig:

<script setup>
const router = useRouter()
</script>

<template>
  <button @click="router.push('/')">Home</button>
</template>

Erklärung: Composables müssen immer innerhalb des <script setup>-Blocks aufgerufen werden.

---

Fehler 5: Dynamische Routen falsch benennen

❌ Falsch:

pages/
├── users/
│   └── userId.vue   ← Falsch! (Kein dynamischer Parameter)

✅ Richtig:

pages/
├── users/
│   └── [id].vue    ← Richtig! (Dynamischer Parameter)

Erklärung: Dynamische Routen müssen eckige Klammern [] verwenden.

---

15.2 Häufige Fehlermeldungen & Lösungen

Fehler: Hydration node mismatch

Ursache: Der Server rendert andere Inhalte als der Client.

Beispiel:

<template>
  <div>
    <!-- ℹ️ Client-spezifisch → Hydration-Fehler! -->
    <p>{{ Math.random() }}</p>
  </div>
</template>

✅ Lösung:

<template>
  <div>
    <!-- ✅ Sicher mit `<ClientOnly>` -->
    <ClientOnly>
      <p>{{ Math.random() }}</p>
    </ClientOnly>
  </div>
</template>

---

Fehler: Cannot find module '#imports'

Ursache: Auto-Import funktioniert nicht.

✅ Lösung:

# .nuxt-Ordner löschen und neu bauen
rm -rf .nuxt
pnpm dev

---

Fehler: 500 Internal Server Error

Ursache: Fehler in der API-Route oder im Server-Code.

✅ Lösung:

1. Überprüfen Sie die Server-Logs: server/api/
2. Stellen Sie sicher, dass asynchrone Funktionen korrekt sind.

---

15.3 Nuxt 3 Kern-Interviewfragen

Frage 1: Was ist der Unterschied zwischen SSR und SSG?

Merkmal	SSR	SSG
Rendering	Bei jeder Anfrage	Einmalig beim Build
SEO	✅ Hervorragend	✅ Hervorragend
Geschwindigkeit	🟡 Mittel	🚀 Sehr schnell
Datenaktualität	✅ Immer aktuell	❌ Build-Zeitpunkt
Serverlast	Hoch	Keine

Antwort: SSR ist besser für dynamische Inhalte, SSG für statische Seiten (Blog, Docs).

---

Frage 2: Was ist der Unterschied zwischen useFetch() und useAsyncData()?

Merkmal	useFetch()	useAsyncData()
Verwendung	Einfacher	Flexibler
Caching	Automatisch	Manueller Schlüssel
Lazy Loading	useLazyFetch()	useLazyAsyncData()
Empfehlung	Einfache API-Aufrufe	Komplexe Logik

Antwort: useFetch() ist eine Abkürzung für useAsyncData() + $fetch().

---

Frage 3: Wie funktioniert Auto-Import in Nuxt 3?

Antwort: Nuxt 3 scannt folgende Verzeichnisse automatisch:

• components/ → Komponenten
• composables/ → Composables
• utils/ → Hilfsfunktionen
• plugins/ → Plugins

Beispiel:

<!-- Kein Import erforderlich! -->
<template>
  <MyComponent />
</template>

---

Frage 4: Was ist der Unterschied zwischen pages/ und components/?

Verzeichnis	Routing	Verwendung
pages/	✅ Automatisch	Seiten (Routen)
components/	❌ Manuell	Wiederverwendbare UI

Antwort: pages/ definiert Routen, components/ enthält wiederverwendbare Teile.

---

Frage 5: Wie verwaltet man globalen Zustand in Nuxt 3?

Antwort: Es gibt zwei Hauptmethoden:

1. useState() (Einfach):

   export const useCounter = () => {
     const count = useState('counter', () => 0)
     return { count }
   }

2. Pinia (Komplex):

   // stores/counter.ts
   export const useCounterStore = defineStore('counter', {
     state: () => ({ count: 0 })
   })

---

15.4 Praxis-Interviewfragen

Frage: Wie würden Sie ein Blog mit Nuxt 3 bauen?

Struktur:

pages/
├── index.vue         → Startseite (Liste)
├── blog/
│   ├── index.vue    → Blog-Übersicht
│   └── [slug].vue  → Einzelner Beitrag

Datenabfrage:

<script setup>
// SSG für bessere Performance
const { data: posts } = await useAsyncData(
  'posts',
  () => queryContent('/blog').find()
)
</script>

SEO:

<script setup>
useSeoMeta({
  title: 'Mein Blog',
  description: 'Tolle Blogbeiträge'
})
</script>

---

Frage: Wie optimieren Sie die Performance einer Nuxt 3 App?

Antwort:

1. Bild-Optimierung: @nuxt/image verwenden
2. Code-Splitting: Automatisch durch Nuxt
3. Lazy Loading: defineAsyncComponent()
4. Caching: routeRules in nuxt.config.ts
5. Tree Shaking: Nur benötigte Importe

---

15.5 Interviewtipps

Für Einsteiger:

1. Grundlagen wiederholen:

   • ✅ Vue 3 Composition API
   • ✅ ES6+ JavaScript
   • ✅ Node.js Grundlagen

2. Nuxt 3 Schwerpunkte:

   • ✅ SSR vs. SSG
   • ✅ Auto-Import Mechanismus
   • ✅ useFetch() vs. useAsyncData()
   • ✅ Routing-System

3. Praxiserfahrung:

   • ✅ Ein persönliches Projekt bauen
   • ✅ Deployment auf Vercel/Netlify
   • ✅ SEO-Optimierung

---

15.6 Zusammenfassung

In diesem Kapitel haben Sie gelernt:

• ✅ Häufige Fehler zu vermeiden (useState, localStorage, Hydration)
• ✅ Fehlermeldungen zu interpretieren und zu beheben
• ✅ Kern-Interviewfragen zu beantworten (SSR/SSG, Auto-Import, State Management)
• ✅ Praxis-Interviewfragen (Blog-Projekt, Performance)
• ✅ Tipps für Vorstellungsgespräche

Nächste Schritte: Im nächsten Kapitel lernen wir erweiterte Lernswege für Nuxt 3 kennen.

---

📚 Weiterführende Ressourcen

• Nuxt 3 FAQ
• Vue 3 Interview Questions
• Nuxt 3 Best Practices

---

Nächstes Kapitel: Kapitel 16: Erweiterte Lernswege →