Kapitel 13: Erweiterte Konfiguration & Optimierung

In diesem Kapitel lernen Sie fortgeschrittene Konfigurationsoptionen und Optimierungstechniken für Nuxt 3.

---

13.1 nuxt.config.ts erweiterte Konfiguration

Die nuxt.config.ts ist das Herzstück Ihres Nuxt-Projekts. Hier sind einige erweiterte Optionen:

---

Vite-Konfiguration anpassen:

// nuxt.config.ts
export default defineNuxtConfig({
  vite: {
    ssr: {
      // Externe Abhängigkeiten ausschließen
      noExternal: ['my-library']
    },
    build: {
      rollupOptions: {
        output: {
          // Chunk-Splitting konfigurieren
          manualChunks: {
            vendor: ['vue', 'vue-router']
          }
        }
      }
    }
  }
})

---

Build-Optionen optimieren:

export default defineNuxtConfig({
  build: {
    // Transpilierung für ältere Browser
    transpile: ['gsap', 'animejs'],

    // Plugins manuell hinzufügen
    plugins: [
      // Vite-Plugins
    ],

    // Öffentliche Pfade für Assets
    publicPath: '/static/'
  }
})

---

Server-Optionen:

export default defineNuxtConfig({
  server: {
    // Server-Host und Port
    host: '0.0.0.0',
    port: 3000,

    // HTTPS konfigurieren
    https: {
      key: './server-key.pem',
      cert: './server-cert.pem'
    }
  }
})

---

13.2 Performance-Optimierung

1. Code-Splitting (Automatisch)

Nuxt 3 führt automatisch Code-Splitting durch. Jede Seite lädt nur den notwendigen JavaScript-Code.

Manuelles Code-Splitting mit defineAsyncComponent:

<script setup>
import { defineAsyncComponent } from 'vue'

// Lazy Loading für große Komponenten
const HeavyChart = defineAsyncComponent(() =>
  import('~/components/HeavyChart.vue')
)
</script>

<template>
  <div>
    <ClientOnly>
      <HeavyChart />
    </ClientOnly>
  </div>
</template>

---

2. Bild-Optimierung (@nuxt/image)

pnpm add @nuxt/image

Konfiguration:

export default defineNuxtConfig({
  modules: ['@nuxt/image'],
  image: {
    screens: {
      sm: 640,
      md: 768,
      lg: 1024,
      xl: 1280
    },
    formats: ['webp', 'avif'],
    quality: 80
  }
})

Verwendung:

<template>
  <!-- Automatische Optimierung -->
  <NuxtImg
    src="/images/hero.jpg"
    alt="Hero Bild"
    format="webp"
    quality="80"
    loading="lazy"
    sizes="sm:100vw md:50vw lg:33vw"
  />
</template>

---

3. Caching-Strategien

API-Routen cachen:

// nuxt.config.ts
export default defineNuxtConfig({
  routeRules: {
    // Cache für 1 Stunde
    '/api/posts': { cache: { maxAge: 60 * 60 } },

    // Statische Generierung
    '/about': { prerender: true },

    // Client-Side Only
    '/dashboard/**': { ssr: false }
  }
})

---

4. Tree Shaking

Stellen Sie sicher, dass Ihre Importe Tree-Shakeable sind:

// ❌ Schlecht (ganzes Modul importieren)
import _ from 'lodash'

// ✅ Gut (nur benötigte Funktion importieren)
import debounce from 'lodash/debounce'

---

13.3 Umgebungsvariablen konfigurieren

.env-Datei erstellen:

# .env (Development)
NUXT_PUBLIC_API_BASE=https://api-dev.example.com
NUXT_SECRET_API_KEY=dev-secret-key

# .env.production
NUXT_PUBLIC_API_BASE=https://api.example.com
NUXT_SECRET_API_KEY=prod-secret-key

---

In nuxt.config.ts verwenden:

export default defineNuxtConfig({
  runtimeConfig: {
    // Private Variablen (nur Server)
    apiSecret: process.env.NUXT_SECRET_API_KEY,

    // Öffentliche Variablen (Server & Client)
    public: {
      apiBase: process.env.NUXT_PUBLIC_API_BASE || '/api'
    }
  }
})

---

In Komponenten verwenden:

<script setup>
const config = useRuntimeConfig()

// Öffentliche Variable
const apiBase = config.public.apiBase

// Private Variable (nur Server!)
if (process.server) {
  const apiSecret = config.apiSecret
}
</script>

---

13.4 Benutzerdefinierte Middleware

Global Middleware (middleware/global.ts):

// Wird bei jeder Navigation ausgeführt
export default defineNuxtRouteMiddleware((to, from) => {
  console.log(`Navigiere von ${from.path} nach ${to.path}`)

  // Beispiel: Wartungsmodus
  if (to.path !== '/maintenance' && isMaintenanceMode()) {
    return navigateTo('/maintenance')
  }
})

---

Seitenspezifische Middleware (middleware/auth.ts):

export default defineNuxtRouteMiddleware((to, from) => {
  const token = useCookie('auth_token')

  if (!token.value && to.path !== '/login') {
    return navigateTo('/login')
  }
})

Verwendung in einer Seite:

<script setup>
definePageMeta({
  middleware: ['auth', 'admin']  // Mehrere Middlewares
})
</script>

---

13.5 Modul-Entwicklung (Einführung)

Nuxt 3 Module erweitern die Funktionalität Ihres Projekts.

Einfaches Modul erstellen (modules/my-module.ts):

import { defineNuxtModule } from '@nuxt/kit'

export default defineNuxtModule({
  meta: {
    name: 'my-module',
    configKey: 'myModule'
  },

  defaults: {
    enabled: true
  },

  setup(options, nuxt) {
    // Modul-Logik hier
    if (options.enabled) {
      // Beispiel: Globalen CSS hinzufügen
      nuxt.options.css.push('~/assets/scss/my-module.scss')
    }
  }
})

---

Modul in nuxt.config.ts aktivieren:

export default defineNuxtConfig({
  modules: [
    '~/modules/my-module'
  ],

  myModule: {
    enabled: true
  }
})

---

13.6 Zusammenfassung

In diesem Kapitel haben Sie gelernt:

• ✅ Erweiterte nuxt.config.ts Konfiguration (Vite, Build, Server)
• ✅ Performance-Optimierung (Code-Splitting, Bild-Optimierung, Caching)
• ✅ Umgebungsvariablen zu konfigurieren (.env, runtimeConfig)
• ✅ Benutzerdefinierte Middleware zu erstellen (global & seiten-spezifisch)
• ✅ Einführung in die Modul-Entwicklung

Nächste Schritte: Im nächsten Kapitel lernen wir Deployment & Live-Schaltung – wie man Nuxt 3 Projekte produktionsbereit macht.

---

📚 Weiterführende Ressourcen

• Nuxt 3 Config Referenz
• Performance Optimierung
• Runtime Config Dokumentation
• Middleware Dokumentation
• Module Entwicklung

---

Nächstes Kapitel: Kapitel 14: Deployment & Live-Schaltung →