Kapitel 3: Nuxt-Projekt erstellen & Verzeichnisstruktur

3.1 Zwei Möglichkeiten zum Erstellen eines Projekts

Nuxt 3 bietet verschiedene Möglichkeiten, ein neues Projekt zu erstellen. Hier sind die zwei empfohlenen Methoden für Einsteiger:

---

Methode 1: nuxi init Befehl (Empfohlen)

Dies ist die einfachste und schnellste Methode, um ein Standard-Nuxt-Projekt zu erstellen.

Schritt-für-Schritt:

Schritt 1: Projekt erstellen

npx nuxi@latest init mein-nuxt-projekt

Schritt 2: In das Projektverzeichnis wechseln

cd mein-nuxt-projekt

Schritt 3: Abhängigkeiten installieren

# Mit pnpm (empfohlen)
pnpm install

# Mit npm
npm install

# Mit yarn
yarn install

Schritt 4: Entwicklungsserver starten

pnpm dev
# oder
npm run dev

Öffnen Sie im Browser.

---

Methode 2: Offizielle Templates verwenden

Nuxt bietet vorgefertigte Templates für verschiedene Anwendungsfälle.

Verfügbare Templates:

• nuxt/starter - Standard-Projekt
• nuxt/content - Blog/Content-Website
• nuxt/ui - Mit UI-Komponenten (Nuxt UI)
• nuxt/ecosystem - Vollständiges Ökosystem

Beispiel: Blog-Template erstellen

npx nuxi@latest init -t content mein-blog
cd mein-blog
pnpm install
pnpm dev

---

3.2 Projektabhängigkeiten & Startbefehle

Wichtige npm-Skripte (package.json)

Nach der Projekterstellung enthält Ihre package.json folgende Skripte:

{
  "scripts": {
    "dev": "nuxt dev",          // Entwicklungsserver starten
    "build": "nuxt build",      // Produktions-Build
    "generate": "nuxt generate", // Statische Seiten generieren (SSG)
    "preview": "nuxt preview"   // Produktions-Build lokal testen
  }
}

Befehle im Überblick:

Befehl	Beschreibung	Port
pnpm dev	Entwicklungsserver (Hot Reload)	3000
pnpm build	Produktions-Build (.output/)	-
pnpm generate	Statische Seiten (.output/public/)	-
pnpm preview	Produktions-Build testen	3000

---

3.3 Projektverzeichnisstruktur (Detailanalyse)

Ein frisch erstelltes Nuxt 3-Projekt hat folgende Struktur:

mein-nuxt-projekt/
├── .nuxt/              # Build-Artefakte (nicht bearbeiten!)
├── .output/            # Produktions-Build (nach 'nuxt build')
├── assets/             # Unverarbeitete Assets (SCSS, Bilder, Fonts)
├── components/         # Vue-Komponenten (auto-importiert)
├── composables/        # Composables (auto-importiert)
├── content/            # Markdown-Inhalte (mit @nuxt/content)
├── layouts/            # Layout-Komponenten
├── middleware/          # Route-Middleware
├── pages/              # Seiten (automatisches Routing!)
├── plugins/            # Nuxt-Plugins
├── public/             # Statische Assets (Bilder, favicon.ico)
├── server/             # Server-Routen & API-Endpunkte
│   ├── api/            # API-Routen
│   ├── middleware/     # Server-Middleware
│   └── utils/         # Server-Hilfsfunktionen
├── app.vue             # Hauptkomponente (Root)
├── nuxt.config.ts      # Nuxt-Konfiguration
├── package.json        # Projektabhängigkeiten
├── tsconfig.json       # TypeScript-Konfiguration
└── .env                # Umgebungsvariablen

---

Kernverzeichnisse im Detail:

1. pages/ (Wichtigstes Verzeichnis!)

• Enthält alle Seiten Ihrer Anwendung
• Dateinamen bestimmen die URL-Struktur (dateibasiertes Routing)
• Beispiel: pages/about.vue → /about

2. components/

• Wiederverwendbare Vue-Komponenten
• Auto-Import: Kein manueller Import erforderlich!
• Beispiel: components/MyButton.vue → <MyButton />

3. layouts/

• Layout-Komponenten (Header, Footer, Sidebar)
• default.vue ist das Standard-Layout
• Mehrere Layouts für verschiedene Seiten möglich

4. composables/

• Eigene Composables (logische Funktionen)
• Auto-Import: Verfügbar in allen Komponenten
• Beispiel: composables/useCounter.ts → useCounter()

5. server/

• Backend-Logik (API-Routen, Middleware, Server-Utilities)
• Nuxt 3 verwendet Nitro als Server-Engine
• Dateibasiertes API-Routing: server/api/hello.ts → /api/hello

6. public/

• Statische Dateien (Bilder, PDFs, favicon.ico)
• Direkt unter der Root-URL verfügbar
• Beispiel: public/logo.png → /logo.png

7. assets/

• Unverarbeitete Assets (SCSS, LESS, Bilder, Fonts)
• Werden von Vite/Nuxt verarbeitet (optimiert)
• Beispiel: assets/scss/main.scss

---

3.4 Konfigurationsdatei: nuxt.config.ts

Die nuxt.config.ts ist das Herzstück Ihres Nuxt-Projekts. Hier konfigurieren Sie Module, Plugins, Build-Optionen und mehr.

Einfaches Beispiel:

// nuxt.config.ts
export default defineNuxtConfig({
  // Meta-Informationen
  app: {
    head: {
      title: 'Meine Nuxt App',
      charset: 'utf-8',
      viewport: 'width=device-width, initial-scale=1'
    }
  },

  // Modules hinzufügen
  modules: [
    '@nuxt/content',    // Für Markdown-Inhalte
    '@nuxt/image'       // Für Bildoptimierung
  ],

  // Build-Konfiguration
  build: {
    transpile: []
  },

  // TypeScript-Konfiguration
  typescript: {
    strict: true
  },

  // Umgebungsvariablen
  runtimeConfig: {
    public: {
      apiBase: process.env.API_BASE || '/api'
    }
  }
})

Wichtige Konfigurationsoptionen:

Option	Beschreibung
app.head	Meta-Tags, Title, Favicon
modules	Nuxt-Module hinzufügen
css	Globale CSS-Dateien
build	Build-Optionen (Transpilation)
vite	Vite-spezifische Optionen
runtimeConfig	Umgebungsvariablen
routeRules	Rendering-Modus pro Route

---

3.5 Auto-Import Mechanismus (Kernfeature!)

Eines der stärksten Features von Nuxt 3 ist der Auto-Import.

Was wird automatisch importiert?

1. Komponenten

Datei: components/MyButton.vue

<!-- Kein Import erforderlich! -->
<template>
  <MyButton>Klick mich!</MyButton>
</template>

2. Composables

Datei: composables/useCounter.ts

// composables/useCounter.ts
export function useCounter() {
  const count = ref(0)
  function increment() {
    count.value++
  }
  return { count, increment }
}

Verwendung (kein Import!):

<script setup>
const { count, increment } = useCounter()
</script>

3. Nuxt-APIs

Folgende APIs sind immer verfügbar:

• useRoute(), useRouter()
• useFetch(), useAsyncData()
• useState(), useCookie()
• useHead(), useSeoMeta()

---

3.6 Zusammenfassung

In diesem Kapitel haben Sie gelernt:

• ✅ Zwei Methoden zum Erstellen eines Nuxt-Projekts (nuxi init & Templates)
• ✅ Wichtige npm-Skripte (dev, build, generate)
• ✅ Die vollständige Verzeichnisstruktur und deren Zweck
• ✅ Die nuxt.config.ts Konfigurationsdatei
• ✅ Den Auto-Import-Mechanismus (Komponenten, Composables, APIs)

Nächste Schritte: Im nächsten Kapitel lernen wir das Routing-System von Nuxt kennen – eines der mächtigsten Features!

---

📚 Weiterführende Ressourcen

• Nuxt 3 Installation Guide
• Verzeichnisstruktur Dokumentation
• Nuxt Config Referenz
• Auto-Imports Dokumentation

---

Nächstes Kapitel: Kapitel 4: Routing-System →