Nuxt 3 — Full-Stack Development with Vue and Nitro Engine

Ein vollstaendiger Leitfaden zur Full-Stack-Entwicklung mit Nuxt 3. Server-Routen, API-Schicht, Nitro-Engine, Auto-Imports und Edge-Deployment.

Einfuehrung in Nuxt 3¶

Nuxt 3 ist ein Full-Stack-Framework basierend auf Vue 3, angetrieben von der Nitro-Engine. Es bietet alles, was zum Erstellen moderner Webanwendungen mit Server-Side-Rendering, API-Routen und Edge-Deployment-Faehigkeiten benoetigt wird.

Hauptmerkmale von Nuxt 3: - Vue 3 & Composition API - Modernes reaktives Framework - Nitro-Engine - Universelle Deployment- und Server-Engine - Auto-Imports - Zero-Config-Imports fuer Komponenten und Composables - TypeScript - Erstklassige TypeScript-Unterstuetzung - Dateibasiertes Routing - Automatische Routengenerierung - Server API - Integrierte API-Schicht

Projektstruktur¶

project/
├── components/          # Vue-Komponenten (automatisch importiert)
├── pages/              # Dateibasiertes Routing
├── server/
│   └── api/           # API-Endpunkte
├── composables/       # Vue Composables (automatisch importiert)
├── middleware/        # Route-Middleware
├── plugins/          # Nuxt-Plugins
├── layouts/          # Layout-Komponenten
└── nuxt.config.ts    # Konfiguration

Seiten und Routing¶

Dateibasiertes Routing mit automatischem Code-Splitting:

<!-- pages/index.vue -->
<template>
  <div>
    <h1>{{ data.title }}</h1>
    <NuxtLink to="/about">Ueber uns</NuxtLink>
  </div>
</template>

<script setup>
// Automatisch importierte Composables
const { data } = await useFetch('/api/homepage')

// SEO mit eingebauten Composables
useSeoMeta({
  title: 'Meine Nuxt App',
  ogDescription: 'Meine grossartige Website.',
  ogImage: '/image.png'
})
</script>

Dynamische Routen mit Parametern:

<!-- pages/blog/[slug].vue -->
<template>
  <article>
    <h1>{{ post.title }}</h1>
    <div v-html="post.content" />
  </article>
</template>

<script setup>
const route = useRoute()
const { data: post } = await useFetch(`/api/posts/${route.params.slug}`)

if (!post.value) {
  throw createError({ statusCode: 404, statusMessage: 'Beitrag nicht gefunden' })
}
</script>

Server-API-Routen¶

Erstellen Sie API-Endpunkte im server/api-Verzeichnis:

// server/api/posts/index.get.ts
export default defineEventHandler(async (event) => {
  // Abfrageparameter
  const query = getQuery(event)
  const limit = query.limit || 10

  // Beispieldaten (durch Datenbankabfrage ersetzen)
  const posts = await $fetch('https://api.example.com/posts', {
    params: { limit }
  })

  return {
    posts,
    meta: {
      total: posts.length,
      limit
    }
  }
})

POST-Endpunkt mit Validierung:

// server/api/posts/index.post.ts
import { z } from 'zod'

const createPostSchema = z.object({
  title: z.string().min(1),
  content: z.string().min(10),
  authorId: z.number()
})

export default defineEventHandler(async (event) => {
  const body = await readBody(event)

  // Eingabe validieren
  const result = createPostSchema.safeParse(body)
  if (!result.success) {
    throw createError({
      statusCode: 400,
      statusMessage: 'Validierung fehlgeschlagen',
      data: result.error.errors
    })
  }

  // Beitrag erstellen (durch Datenbanklogik ersetzen)
  const post = await createPost(result.data)

  return { post }
})

Composables und State Management¶

Erstellen Sie wiederverwendbare Composables:

// composables/useAuth.ts
export const useAuth = () => {
  const user = useState('auth.user', () => null)
  const isLoggedIn = computed(() => !!user.value)

  const login = async (credentials: LoginCredentials) => {
    const { data } = await $fetch('/api/auth/login', {
      method: 'POST',
      body: credentials
    })
    user.value = data.user
    await navigateTo('/dashboard')
  }

  const logout = async () => {
    await $fetch('/api/auth/logout', { method: 'POST' })
    user.value = null
    await navigateTo('/login')
  }

  return {
    user,
    isLoggedIn,
    login,
    logout
  }
}

Konfiguration und Deployment¶

Grundlegende Nuxt-Konfiguration:

// nuxt.config.ts
export default defineNuxtConfig({
  // Entwicklungswerkzeuge
  devtools: { enabled: true },

  // CSS-Framework
  css: ['~/assets/css/main.css'],

  // Build-Konfiguration
  nitro: {
    preset: 'vercel-edge' // oder 'netlify', 'cloudflare-pages'
  },

  // Laufzeitkonfiguration
  runtimeConfig: {
    // Private Schluessel (nur serverseitig)
    apiSecret: process.env.API_SECRET,

    // Oeffentliche Schluessel (dem Client zugaenglich)
    public: {
      apiBase: process.env.API_BASE || '/api'
    }
  },

  // Module
  modules: [
    '@pinia/nuxt',
    '@nuxtjs/tailwindcss'
  ]
})

Best Practices¶

1. Auto-Imports nutzen - Nutzen Sie Nuxts Zero-Config-Imports
2. Serverseitiger State - Verwenden Sie useState fuer reaktiven Server-State
3. SEO-Optimierung - Verwenden Sie useSeoMeta und useHead
4. Error Handling - Implementieren Sie korrekte Fehlerseiten
5. TypeScript - Aktivieren Sie TypeScript fuer bessere DX
6. Composables - Erstellen Sie wiederverwendbare Logik mit Composables

Nuxt 3 bietet eine leistungsstarke Full-Stack-Entwicklungserfahrung mit Vue 3, die clientseitige Reaktivitaet mit serverseitigen Faehigkeiten in einem einheitlichen Framework vereint.