Kapitel 10: Nuxt-Ökosystem integrieren

In diesem Kapitel lernen Sie, wie Sie Styling-Lösungen, API-Anfragen, Berechtigungsverwaltung und mehr in Nuxt 3 integrieren.

---

10.1 Styling-Lösungen

Option 1: SCSS/SASS

Installieren:

pnpm add -D sass

Verwendung in Komponenten:

<style lang="scss" scoped>
$primary-color: #00dc82;

.my-component {
  color: $primary-color;

  &:hover {
    color: darken($primary-color, 10%);
  }
}
</style>

---

Option 2: CSS-Module

Datei: assets/scss/main.scss

// Globale Variablen
$primary: #00dc82;
$font-stack: 'Arial', sans-serif;

// Globale Styles
body {
  font-family: $font-stack;
  margin: 0;
  padding: 0;
}

In nuxt.config.ts importieren:

export default defineNuxtConfig({
  css: ['~/assets/scss/main.scss']
})

---

Option 3: Tailwind CSS

Installieren:

pnpm add -D @nuxtjs/tailwindcss tailwindcss postcss autoprefixer

In nuxt.config.ts konfigurieren:

export default defineNuxtConfig({
  modules: [
    '@nuxtjs/tailwindcss'
  ]
})

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">Tailwind CSS</h1>
      <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
        Button
      </button>
    </div>
  </div>
</template>

---

10.2 API-Anfragen integrieren (Axios)

Nuxt 3 verwendet standardmäßig fetch/$fetch. Wenn Sie Axios bevorzugen:

Installieren:

pnpm add @nuxtjs/axios

In nuxt.config.ts:

export default defineNuxtConfig({
  modules: [
    '@nuxtjs/axios'
  ],
  axios: {
    baseURL: 'https://api.example.com'
  }
})

Verwendung:

<script setup>
const { $axios } = useNuxtApp()

const fetchData = async () => {
  try {
    const response = await $axios.get('/posts')
    console.log(response.data)
  } catch (error) {
    console.error(error)
  }
}
</script>

---

10.3 Berechtigungsverwaltung (Auth)

Route-Guards (Middleware)

middleware/auth.ts:

export default defineNuxtRouteMiddleware((to, from) => {
  // Prüfen, ob Token existiert
  const token = useCookie('auth_token')

  if (!token.value && to.path !== '/login') {
    // Nicht eingeloggt → zur Login-Seite weiterleiten
    return navigateTo('/login')
  }
})

In einer Seite verwenden:

<script setup>
definePageMeta({
  middleware: ['auth']  // Verwendet middleware/auth.ts
})
</script>

---

Rollenbasierte Zugriffskontrolle

middleware/admin.ts:

export default defineNuxtRouteMiddleware((to, from) => {
  const user = useState('user', () => null)

  if (!user.value || user.value.role !== 'admin') {
    return navigateTo('/unauthorized')
  }
})

---

10.4 Fehlerbehandlung & Logging

Fehlerseiten anpassen

error.vue (im Root-Verzeichnis):

<script setup>
const props = defineProps({
  error: Object
})

const handleError = () => {
  clearError({ redirect: '/' })
}
</script>

<template>
  <div class="error-page">
    <h1>{{ error.statusCode }}</h1>
    <p>{{ error.message }}</p>
    <button @click="handleError">Zur Startseite</button>
  </div>
</template>

<style scoped>
.error-page {
  text-align: center;
  padding: 100px 20px;
}

h1 {
  font-size: 5em;
  color: #00dc82;
}
</style>

---

Logging (Console/Ecosystem)

plugins/logger.ts:

export default defineNuxtPlugin(() => {
  const logger = {
    info: (message: string) => {
      console.log(`[INFO] ${message}`)
    },
    error: (message: string, error?: any) => {
      console.error(`[ERROR] ${message}`, error)
    }
  }

  return {
    provide: {
      logger
    }
  }
})

Verwendung:

<script setup>
const { $logger } = useNuxtApp()

$logger.info('Seite geladen')
</script>

---

10.5 Drittanbieter-Plugins integrieren

Beispiel: Rich Text Editor (TipTap)

Installieren:

pnpm add @tiptap/vue-3 @tiptap/starter-kit

Verwendung:

<script setup>
import { useEditor, EditorContent } from '@tiptap/vue-3'
import StarterKit from '@tiptap/starter-kit'

const editor = useEditor({
  content: '<p>Ich bin ein Editor!</p>',
  extensions: [
    StarterKit
  ]
})
</script>

<template>
  <div>
    <editor-content :editor="editor" />
  </div>
</template>

---

10.6 Zusammenfassung

In diesem Kapitel haben Sie gelernt:

• ✅ Styling-Lösungen (SCSS, CSS-Module, Tailwind CSS)
• ✅ API-Anfragen mit Axios zu integrieren
• ✅ Berechtigungsverwaltung (Route-Guards, Rollen)
• ✅ Fehlerbehandlung & Logging
• ✅ Drittanbieter-Plugins (Rich Text Editor)

Nächste Schritte: Im nächsten Kapitel starten wir mit Praxisprojekten – wir bauen einen persönlichen Blog und eine Todo-App!

---

📚 Weiterführende Ressourcen

• Tailwind CSS Dokumentation
• Nuxt Axios Module
• Nuxt Middleware Dokumentation
• TipTap Editor Dokumentation

---

Nächstes Kapitel: Kapitel 11: Praxisprojekt - Persönlicher Blog →