Kapitel 16: Erweiterte Lernswege

In diesem Kapitel entdecken wir erweiterte Themen und Modul-Ökosystem von Nuxt 3.

---

16.1 Nuxt-Modul-Ökosystem

Nuxt 3 hat ein reichhaltiges Ökosystem von offiziellen und Community-Modulen.

Wichtigste offizielle Module:

Modul	Beschreibung	Installation
@nuxt/content	Markdown-Inhalte verwalten	pnpm add @nuxt/content
@nuxt/image	Bild-Optimierung	pnpm add @nuxt/image
@nuxtjs/tailwindcss	Tailwind CSS integrieren	pnpm add @nuxtjs/tailwindcss
@nuxtjs/axios	Axios integrieren	pnpm add @nuxtjs/axios
@pinia/nuxt	Pinia State Management	pnpm add @pinia/nuxt
@nuxtjs/sitemap	Sitemap generieren	pnpm add @nuxtjs/sitemap
@nuxtjs/robots	robots.txt verwalten	pnpm add @nuxtjs/robots

---

Beispiel: @nuxt/content verwenden

Installation:

pnpm add @nuxt/content

In nuxt.config.ts konfigurieren:

export default defineNuxtConfig({
  modules: [
    '@nuxt/content'
  ]
})

Inhalt erstellen (content/blog/mein-erster-beitrag.md):

---
title: 'Mein erster Beitrag'
description: 'Dies ist ein Blog-Beitrag mit Nuxt Content'
date: 2024-01-15
---

# Willkommen!

Dies ist der Inhalt meines Beitrags...

Inhalt anzeigen (pages/blog/[slug].vue):

<script setup>
const route = useRoute()
const { data: post } = await useAsyncData(
  `post-${route.params.slug}`,
  () => queryContent(`/blog/${route.params.slug}`).findOne()
)
</script>

<template>
  <div class="post-page">
    <h1>{{ post.title }}</h1>
    <ContentRenderer :value="post" />
  </div>
</template>

---

16.2 Mobile-Anpassung (Mobile-First)

Nuxt 3 ist perfekt für mobile-optimierte Websites.

Option 1: Vant (Vue Mobile UI)

Installation:

pnpm add vant @vant/nuxt

Konfiguration (nuxt.config.ts):

export default defineNuxtConfig({
  modules: [
    '@vant/nuxt'
  ],
  vant: {
    // Automatische Import von Vant-Komponenten
  }
})

Verwendung:

<template>
  <van-button type="primary">Primary Button</van-button>
  <van-cell-group>
    <van-cell title="Zelle 1" value="Inhalt" />
    <van-cell title="Zelle 2" value="Inhalt" />
  </van-cell-group>
</template>

---

Option 2: UnoCSS (Schnelle CSS-Erstellung)

Installation:

pnpm add -D unocss @unocss/nuxt

Konfiguration:

export default defineNuxtConfig({
  modules: [
    '@unocss/nuxt'
  ]
})

Verwendung:

<template>
  <div class="min-h-screen bg-gray-100 flex items-center justify-center">
    <div class="bg-white p-8 rounded-lg shadow-md">
      <h1 class="text-2xl font-bold mb-4">UnoCSS</h1>
      <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
        Button
      </button>
    </div>
  </div>
</template>

---

16.3 TypeScript mit Nuxt 3

Nuxt 3 ist TypeScript-first!

TypeScript in Nuxt 3 aktivieren:

tsconfig.json (wird automatisch generiert):

{
  "extends": "./.nuxt/tsconfig.json",
  "compilerOptions": {
    "strict": true
  }
}

---

Typisierte Composables:

// composables/usePosts.ts
interface Post {
  id: number
  title: string
  content: string
}

export const usePosts = () => {
  const posts = ref<Post[]>([])

  const fetchPosts = async () => {
    const data = await $fetch<Post[]>('/api/posts')
    posts.value = data
  }

  return {
    posts: readonly(posts),
    fetchPosts
  }
}

---

Typisierte API-Routen:

// server/api/posts.ts
import { defineEventHandler } from 'h3'

interface Post {
  id: number
  title: string
}

export default defineEventHandler(async (event): Promise<Post[]> => {
  // Typisierte Rückgabe
  return [
    { id: 1, title: 'Beitrag 1' }
  ]
})

---

16.4 Server-Side Entwicklung (API-Routen)

Nuxt 3 ermöglicht es Ihnen, Backend-APIs direkt in Ihrem Nuxt-Projekt zu erstellen!

API-Route erstellen (server/api/hello.ts):

export default defineEventHandler((event) => {
  return {
    message: 'Hallo von der API!',
    timestamp: new Date().toISOString()
  }
})

Zugriff: /api/hello

---

Datenbank-Anbindung (Beispiel mit Prisma):

Installation:

pnpm add @prisma/client @prisma/nuxt
pnpm add -D prisma

server/api/users.ts:

import { PrismaClient } from '@prisma/client'

const prisma = new PrismaClient()

export default defineEventHandler(async (event) => {
  const users = await prisma.user.findMany()
  return users
})

---

16.5 Zusammenfassung

In diesem Kapitel haben Sie gelernt:

• ✅ Das Nuxt-Modul-Ökosystem zu nutzen (@nuxt/content, @nuxt/image)
• ✅ Mobile-Anpassung mit Vant oder UnoCSS
• ✅ TypeScript in Nuxt 3 zu verwenden (typisierte Composables)
• ✅ Server-Side Entwicklung (API-Routen, Datenbank-Anbindung)

Nächste Schritte: Im letzten Kapitel stellen wir Lernressourcen zusammen, um Ihr Nuxt 3 Wissen zu vertiefen.

---

📚 Weiterführende Ressourcen

• Nuxt 3 Modules
• Nuxt Content Dokumentation
• Vant UI Dokumentation
• UnoCSS Dokumentation
• Prisma Dokumentation

---

Nächstes Kapitel: Kapitel 17: Lernressourcen →