Vue.js Schulung: Vue 3, Composition API, Pinia und Router

Vue kennenlernen und Projekt anlegen

• Vue im Überblick: progressives Framework, Single-File Components, Reaktivität
• Entwicklungsumgebung: Node.js, VS Code mit der Erweiterung „Vue (Official)“
• Toolchain heute: Vite als Standard, Vue CLI nur noch im Bestand
• Vue-CLI-Projekte von Webpack auf Vite umstellen
• Projektstruktur: components, views, stores, composables
• Projekt anlegen mit npm create vue@latest: TypeScript, Router, Pinia, Vitest
• Generiertes Projekt analysieren: main.ts, App.vue, vite.config.ts
• Dev-Server starten, Hot Module Replacement und erste Anpassungen
• Vue DevTools als Browsererweiterung und Vite-Plugin

Komponentenbasierte Entwicklung

• Komponentenarchitektur: Oberflächen in eigenständige Bausteine zerlegen
• Single-File Components mit <script setup>, <template> und <style>
• Lokale Registrierung per Import, globale mit app.component()
• Komplexe Oberflächen gliedern: Seiten-, Layout- und Basiskomponenten
• Wiederverwendbare Komponenten mit klarer Props- und Event-Schnittstelle
• Komponentenhierarchien lesen und Abhängigkeiten flach halten
• Best Practices: Namenskonventionen, Ordner nach Fachlichkeit, kleine Komponenten
• Asynchrone Komponenten mit defineAsyncComponent

Templates und Datenbindung

• Template-Syntax: Interpolation, Direktiven, JavaScript-Ausdrücke
• Attribute binden mit v-bind und Kurzform :
• Ereignisse mit v-on bzw. @ und Modifikatoren wie .prevent
• Computed Properties: Caching, Getter und beschreibbare Computeds
• Dynamische Darstellung: Inhalte, Klassen und Attribute aus Zustand ableiten
• v-if, v-else-if und v-show: wann welche Variante passt
• Listen mit v-for und :key über Arrays, Objekte und Bereiche
• Daten formatieren mit Computeds und Funktionen statt Vue-2-Filtern
• Zahlen und Datumswerte mit Intl.NumberFormat und Intl.DateTimeFormat

Formularverarbeitung

• Formulare in Vue: Zustand, Eingabe, Absenden
• :value mit @input gegenüber v-model: zwei Wege zur Bindung
• Zweiwege-Bindung mit v-model und Modifikatoren .trim, .number, .lazy
• Eingaben validieren: eigene Regeln oder VeeValidate mit Zod
• Input-Typen: Text, Checkbox, Radio, Select und Mehrfachauswahl
• Formularzustände steuern: geändert, berührt, wird gesendet, fehlerhaft
• Eigene Eingabekomponenten mit defineModel
• Formularlogik in Composables auslagern und wiederverwenden

Composition API und Reaktivität

• Warum Composition API: Logik nach Belangen statt nach Optionen ordnen
• Komponenten mit setup() aufbauen: Rückgabewerte und Kontext
• <script setup> mit defineProps, defineEmits, defineExpose
• ref und reactive: Entpacken und Fallstricke beim Destrukturieren
• shallowRef, readonly, toRef und toRefs im Vergleich
• watch und watchEffect, Aufräumen mit onWatcherCleanup
• Lifecycle Hooks: onMounted, onUpdated, onUnmounted
• Template-Refs mit useTemplateRef
• Komplexe Logik in Composables strukturieren
• Options API im Bestand lesen und schrittweise umstellen

Styling von Vue-Komponenten

• Globale Stylesheets und komponentenspezifische Styles
• <style scoped>: Kapselung über Datenattribute
• Dynamische Inline-Stile mit :style
• Klassen dynamisch setzen mit Objekt- und Array-Syntax
• Kindkomponenten stylen mit :deep() und :slotted()
• CSS Modules mit <style module> und v-bind() im CSS
• Sass in Vite einbinden mit lang="scss"
• Moderne CSS-Workflows: Verschachtelung, Custom Properties, Tailwind CSS

Kommunikation zwischen Komponenten

• Datenfluss: Props nach unten, Events nach oben
• Props mit defineProps übergeben und mit TypeScript typisieren
• Props validieren: Pflichtfelder, Standardwerte, eigene Validatoren
• Reaktive Props-Destrukturierung mit Standardwerten
• Eigene Events mit defineEmits deklarieren und auslösen
• Lifecycle von Eltern- und Kindkomponenten im Zusammenspiel
• provide und inject mit typisiertem InjectionKey
• Slots für flexible Inhalte
• Named und Scoped Slots für Layouts und Listen
• <Teleport> für Dialoge und Overlays

Routing mit Vue Router

• SPA-Grundlagen: clientseitige Navigation und History API
• Vue Router einrichten mit createRouter und Routentabelle
• Navigation mit RouterLink, useRouter und router.push
• Aktive Links stylen über active-class und exact-active-class
• Dynamische Routen mit Parametern und useRoute
• Routenparameter als Props an Komponenten übergeben
• History Modes: createWebHistory und createWebHashHistory
• Navigation Guards für geschützte Bereiche
• Routen per dynamischem Import nachladen

HTTP-Kommunikation und API-Integration

• Kommunikation mit Backend-APIs: REST, JSON, CORS
• Daten abrufen mit der Fetch API
• Axios: Instanzen, Basis-URL und Interceptors
• Fehlerbehandlung: Statuscodes, Netzwerkfehler, Abbruch per AbortController
• API-Zugriffe in eine Service-Schicht auslagern
• Eigenes useFetch-Composable für Daten-, Lade- und Fehlerzustand
• Asynchrone Daten in Komponenten: Ladeanzeigen und <Suspense>
• REST-Endpunkte mit aus OpenAPI generierten Typen einbinden
• TanStack Query für Vue: Caching und erneutes Laden

State Management mit Pinia

• Wann zentraler Zustand nötig ist und wann Props genügen
• Zentralen Store mit defineStore anlegen und registrieren
• Pinia-Grundlagen: Option Stores und Setup Stores
• Daten speichern und lesen, Destrukturieren mit storeToRefs
• Reaktiver Store-State, $patch und $reset
• Getter für abgeleitete Daten
• Actions für API-Aufrufe mit Lade- und Fehlerzustand
• Stores in mehreren Komponenten und in anderen Stores nutzen
• Vuex-Module im Bestand nach Pinia migrieren

Eigene Direktiven entwickeln

• Einsatzzwecke: Fokus, Klick außerhalb, Sichtbarkeit per Intersection Observer
• Eigene Direktive in <script setup> als vFokus definieren
• Werte, Argumente und Modifikatoren an Direktiven übergeben
• Direktiven-Hooks mounted, updated, unmounted
• Globale Registrierung mit app.directive()
• Direktive, Composable oder Komponente: Entscheidungskriterien

Qualität, Build und Deployment

• Komponententests mit Vitest und Vue Test Utils
• Typprüfung mit vue-tsc, Linting mit eslint-plugin-vue
• Produktions-Build mit vite build, Vorschau mit vite preview
• Entwicklungs- und Produktionsmodus: Warnungen, DevTools, Bundle-Größe
• Umgebungsvariablen in .env-Dateien und import.meta.env
• Auslieferung über nginx, Apache oder statisches Hosting
• Deep Links: Fallback auf index.html im Server konfigurieren
• Build anpassen: base, Aliase und Chunk-Aufteilung in vite.config.ts
• Produktionsreife: app.config.errorHandler, Caching, Sicherheitsheader

Vue-Projekte mit Coding-Agenten

• Konventionen für den Agenten: <script setup lang="ts">, Pinia, keine Vue-2-Muster
• vue-tsc --noEmit und eslint-plugin-vue als Prüfschritt nach jeder Agentenänderung
• Agent schreibt zuerst Vitest-Tests mit Vue Test Utils, dann die Vue-Komponente
• Options-API-Komponenten per Agent migrieren, Reaktivitätsverluste beim Destrukturieren prüfen
• Pinia-Actions vom Agenten nur über die bestehende API-Service-Schicht ergänzen lassen

Praxisprojekt: Ersatzteilkatalog für eine Fahrradwerkstatt

• Katalog- und Detailseiten mit Vue Router, Filter nach Kategorie und Suchfeld
• Bestellliste als Pinia-Store mit Mengen, Summen und Speicherung im localStorage
• Bestellformular aus defineModel-Eingabefeldern mit Validierung
• Vitest-Tests, Produktions-Build und Deep-Link-Konfiguration für nginx