Kapitel 1: Nuxt.js Einführung

1.1 Was ist Nuxt.js?

Nuxt.js ist ein opinionated (konventionelles) Web-Framework, das auf Vue.js basiert. Es ermöglicht Entwicklern, leistungsstarke und produktionsbereite Webanwendungen mit Vue.js zu erstellen.

Kernkonzepte:

• Meta-Framework: Baut auf Vue.js auf und erweitert es um zusätzliche Funktionen
• Full-Stack-fähig: Unterstützt sowohl Frontend- als auch Backend-Entwicklung
• Konventionsbasiert: Dateistruktur bestimmt Routing, ohne manuelle Konfiguration
• Render-Modi: SSR (Server-Side Rendering), SSG (Static Site Generation), SPA (Single Page Application)

Nuxt.js vs. Vue.js

Merkmal	Vue.js	Nuxt.js
Typ	Frontend-Bibliothek	Full-Stack Framework
Routing	Manuell (Vue Router)	Automatisch (Dateisystem)
Rendering	Nur Client-Side	SSR, SSG, SPA
SEO	Eingeschränkt	Optimiert (SSR)
Entwicklung	Flexibler	Strukturierter

---

1.2 Unterschiede zwischen Nuxt 3 und Nuxt 2

Nuxt 3 ist ein kompletter Rewrite von Nuxt 2 mit modernen Web-Standards.

Hauptunterschiede:

1. Vue-Version

• Nuxt 2: Basiert auf Vue 2
• Nuxt 3: Basiert auf Vue 3 (Composition API, Performance-Verbesserungen)

2. Rendering-Engine

• Nuxt 2: Vue Server Renderer
• Nuxt 3: Nitro (moderner Server-Engine)

3. Auto-Imports

• Nuxt 2: Manueller Import erforderlich
• Nuxt 3: Automatisches Importieren von Komponenten, Composables, etc.

4. Verzeichnisstruktur

• Nuxt 2: pages/, components/, store/ (Vuex)
• Nuxt 3: pages/, components/, composables/, server/ (API-Routen)

5. State Management

• Nuxt 2: Vuex (Store-Module)
• Nuxt 3: Pinia (empfohlen) oder useState()

6. Konfiguration

• Nuxt 2: nuxt.config.js (JavaScript)
• Nuxt 3: nuxt.config.ts (TypeScript-Unterstützung)

---

1.3 Kernvorteile von Nuxt.js

1. Server-Side Rendering (SSR)

• Bessere SEO (Suchmaschinenoptimierung)
• Schnellere initiale Ladezeit
• Bessere Performance auf mobilen Geräten

2. Static Site Generation (SSG)

• Generierung statischer HTML-Dateien
• Hosting auf CDNs möglich (kostenlos und schnell)
• Ideale für Blogs, Dokumentationen, Landing Pages

3. Automatischer Import

• Komponenten werden automatisch erkannt
• Composables sind ohne Import verfügbar
• Plugins werden automatisch registriert

4. Dateibasiertes Routing

• Keine manuelle Router-Konfiguration
• URL-Struktur entspricht der Verzeichnisstruktur
• Unterstützung für dynamische Routen

5. Reichhaltiges Ökosystem

• Offizielle Module (Auth, Content, Image, etc.)
• Drittanbieter-Module
• Aktive Community

6. Entwicklerfreundlich

• Hot Module Replacement (HMR)
• TypeScript-Unterstützung
• Integriertes Testing

---

1.4 Anwendungsfälle für Nuxt.js

Nuxt.js eignet sich für verschiedene Arten von Webprojekten:

1. Unternehmenswebsites

• SEO-optimiert
• Schnelle Ladezeiten
• Mehrsprachig (i18n)

2. Blogs & Content-Plattformen

• Statische Generierung (SSG)
• Markdown-Unterstützung (@nuxt/content)
• CMS-Integration (Strapi, WordPress)

3. E-Commerce

• SSR für bessere SEO
• Dynamische Produktseiten
• Warenkorb & Checkout

4. Web-Anwendungen (SPA)

• Dashboard & Admin-Panels
• Interaktive Tools
• Progressive Web Apps (PWA)

5. Portfolios & Landing Pages

• Statische Seiten
• Animationen & Interaktivität
• Einfaches Deployment

---

1.5 Lernplan für Einsteiger

Empfohlener Lernweg:

Phase 1: Grundlagen (1-2 Wochen)

1. ✅ Vue.js 3 Grundlagen (Composition API)
2. ✅ ES6+ JavaScript (Arrow Functions, Destructuring, Modules)
3. ✅ Node.js Grundlagen (npm, Paketverwaltung)

Phase 2: Nuxt.js Einstieg (2-3 Wochen)

1. ✅ Nuxt 3 Projekt erstellen
2. ✅ Verzeichnisstruktur verstehen
3. ✅ Routing-System meistern
4. ✅ Komponenten & Auto-Imports

Phase 3: Fortgeschrittene Themen (3-4 Wochen)

1. ✅ Data Fetching (useFetch, useAsyncData)
2. ✅ State Management (Pinia, useState)
3. ✅ Middleware & Plugins
4. ✅ SEO & Meta-Tags

Phase 4: Praxisprojekte (4-6 Wochen)

1. ✅ Persönlicher Blog
2. ✅ Todo-App
3. ✅ E-Commerce Landing Page
4. ✅ Unternehmenswebsite

Phase 5: Deployment & Optimierung (1-2 Wochen)

1. ✅ Build & Generate
2. ✅ Deployment (Vercel, Netlify, Server)
3. ✅ Performance-Optimierung

---

1.6 Zusammenfassung

In diesem Kapitel haben Sie gelernt:

• ✅ Was Nuxt.js ist und wie es sich von Vue.js unterscheidet
• ✅ Die Hauptunterschiede zwischen Nuxt 2 und Nuxt 3
• ✅ Die Kernvorteile von Nuxt.js (SSR, SSG, Auto-Imports)
• ✅ Typische Anwendungsfälle für Nuxt.js
• ✅ Einen strukturierten Lernplan für Einsteiger

Im nächsten Kapitel bereiten wir unsere Entwicklungsumgebung vor und installieren die notwendigen Tools.

---

📚 Weiterführende Ressourcen

• Offizielle Nuxt 3 Dokumentation
• Nuxt 3 GitHub Repository
• Vue.js 3 Dokumentation

---

Nächstes Kapitel: Kapitel 2: Frontend & Entwicklungsumgebung vorbereiten →