Nuxt Fullstack
In 4 Tagen zur produktionsreifen Nuxt-Anwendung mit Vue, Server API, Datenbank, Authentifizierung und Deployment
Über den Workshop
In diesem Nuxt Workshop entwickelst du innerhalb von vier Tagen eine vollständige Fullstack-Webanwendung auf Basis von Vue und Nuxt. Du lernst, wie du Seiten, Layouts und Komponenten strukturierst, dynamische Routen erstellst und unterschiedliche Rendering-Strategien gezielt einsetzt. Dabei behandelst du auch Datenabrufe, Ladezustände, Fehlerseiten, Middleware und Metadaten. Im Mittelpunkt steht eine Projektstruktur, die sich für größere und langfristig wartbare Anwendungen eignet.
Eine durchgängige Beispielanwendung verbindet Frontend, Server API und Datenbank. Du liest Daten mit den Nuxt-eigenen Data-Fetching-Funktionen, entwickelst serverseitige API-Endpunkte und setzt Datenbankabfragen sowie Mutationen sicher um. Anschließend ergänzt du Authentifizierung, Session Management und rollenbasierte Autorisierung. Zum Abschluss bereitest du die Anwendung für den produktiven Betrieb vor und stellst sie wahlweise über eine Hosting-Plattform oder als Docker-Container bereit. Dabei behandelst du auch Umgebungsvariablen, Datenbankmigrationen, Build-Prozesse und typische Sicherheitsaspekte einer produktiven Nuxt-Anwendung.
Tagesablauf
Nuxt, Routing und Rendering
- 01Nuxt im Vue-Ökosystem und typische Einsatzgebiete
- 02Projektsetup mit TypeScript
- 03Projektstruktur, Seiten, Layouts und Komponenten
- 04Auto Imports und Nuxt Composables
- 05Dateibasiertes Routing und Navigation
- 06Dynamische Routen und URL-Parameter
- 07Serverseitiges Rendering, statische Generierung und Client-side Rendering
- 08Hybrides Rendering und Route Rules
- 09Loading UI, Fehlerbehandlung und Fehlerseiten
- 10Metadaten und Suchmaschinenoptimierung
Server API, Datenbank und Datenverarbeitung
- 01Aufbau und Funktionsweise der Nuxt Server Engine
- 02Erstellen serverseitiger API-Endpunkte
- 03Datenabrufe mit useFetch, useAsyncData und $fetch
- 04Datenbankanbindung und sichere Verwendung von Umgebungsvariablen
- 05Datenmodellierung und Datenbankmigrationen
- 06Datenbankabfragen und dynamische Detailseiten
- 07Erstellen, Ändern und Löschen von Datensätzen
- 08Formularverarbeitung und serverseitige Validierung
- 09Fehlerbehandlung und strukturierte API-Antworten
- 10Caching und Aktualisierung der Benutzeroberfläche
Authentication, Sessions und Authorization
- 01Unterschiede zwischen Authentication und Authorization
- 02Registrierung, Anmeldung und Abmeldung
- 03Sicheres Speichern und Prüfen von Passwörtern
- 04Session Management mit Cookies
- 05Zugriff auf den angemeldeten Benutzer im Frontend und auf dem Server
- 06Route Middleware und geschützte Seiten
- 07Rollen und Berechtigungen
- 08Autorisierung von API-Endpunkten und Datenbankzugriffen
- 09Sicherheitsaspekte bei Formularen, Cookies und Benutzereingaben
Nuxt Modules und Produktionsbetrieb
- 01Aufbau und Funktionsweise eines Nuxt Modules
- 02Erstellen und Registrieren eines lokalen Nuxt Modules
- 03Konfiguration und Module Options
- 04Komponenten durch ein Nuxt Module bereitstellen
- 05Composables durch ein Nuxt Module bereitstellen
- 06Nuxt Kit und wichtige Module Utilities
- 07Abgrenzung zwischen Nuxt Module, Nuxt Plugin und Vue Plugin
- 08Produktionsbuild und Überprüfung der Anwendung
- 09Runtime Config und Konfiguration von Umgebungsvariablen
- 10Deployment auf einer unterstützten Hosting-Plattform
- 11Produktive Datenbankverbindungen und Migrationen
- 12Deployment Presets und serverseitige Laufzeitumgebungen
- 13Containerisierung einer Nuxt-Anwendung mit Docker
- 14Mehrstufiger Docker-Build
- 15Konfiguration über Docker Compose
- 16Logging, Fehleranalyse und typische Deployment-Probleme
- 17Abschluss und Weiterentwicklung der Beispielanwendung
Für wen ist der Workshop geeignet?
Zielgruppe
- ✓Du entwickelst Vue-Anwendungen und möchtest vollständige Fullstack-Anwendungen mit Nuxt umsetzen
- ✓Du möchtest serverseitiges Rendering, Data Fetching und die Nuxt Server API sicher einsetzen
- ✓Du planst datenbankgestützte Webanwendungen mit Authentifizierung und geschützten Bereichen
- ✓Du möchtest Nuxt-Anwendungen produktiv über eine Hosting-Plattform oder Docker bereitstellen
Voraussetzungen
- ✓Sichere Grundlagen in HTML5 und CSS3
- ✓Gute JavaScript- und TypeScript-Kenntnisse
- ✓Praktische Erfahrung mit Vue, der Composition API und Single-File Components
- ✓Grundkenntnisse zu HTTP, REST und relationalen Datenbanken sind hilfreich
Was Sie mitnehmen
Über den Trainer
Manuel Kübler
Manuel Kübler ist freiberuflicher Full-Stack-Entwickler und IT-Trainer mit über 12 Jahren Projekterfahrung in der Softwareentwicklung. Er begleitet Unternehmen als Entwickler und Berater – von der Konzeption moderner Webanwendungen bis hin zur Anbindung und Erweiterung von ERP-Systemen. Seine Schwerpunkte liegen in der Entwicklung mit React, Vue.js, Angular, Laravel und Node.js sowie in der SAP Business One-Entwicklung mit C# und dem coresuite Country Package. Als erfahrener Trainer konzipiert und leitet er Intensivschulungen für Softwareunternehmen und Hochschulen zu Themen wie React, Vue.js, Laravel, Git, ASP.NET und weiteren modernen Technologien. Seine Beispielprojekte und Lehrmaterialien sind auf GitHub unter SoftwareDesign-Solution öffentlich einsehbar.