Vue.js positioniert sich seit seiner Veröffentlichung 2014 als das progressive JavaScript-Framework: Es kann schrittweise in bestehende Projekte eingebunden werden und skaliert von einem einfachen Script-Tag bis hin zu komplexen Single-Page-Anwendungen. Evan You, ehemaliger Google-Ingenieur, entwarf Vue mit dem Ziel, die besten Teile von Angular und React zu kombinieren – mit einem Fokus auf Zugänglichkeit und sanfte Lernkurve.
Was ist Vue.js?
Vue.js ist ein reaktives JavaScript-Framework für den Aufbau von Benutzer-Oberflächen. Es basiert auf einem Virtual DOM, einer Komponenten-Architektur und einem reaktiven Datenbindungssystem. Vue ist leichtgewichtig, flexibel und hat eine der übersichtlichsten Dokumentationen im Frontend-Ökosystem. Die offizielle Dokumentation unter vuejs.org gilt als Vorlage für gute Framework-Dokumentation.
Vue 3, veröffentlicht 2020, brachte tiefgreifende Verbesserungen: eine neue Composition API, die Neuimplementierung des Reaktivitätssystems auf Basis von ES6-Proxies, bessere TypeScript-Unterstützung und deutlich verbesserte Performance gegenüber Vue 2.
Options API vs. Composition API
Vue bietet zwei verschiedene Wege, Komponenten zu schreiben. Die Options API ist der klassische Ansatz: Eine Komponente wird als Objekt mit festgelegten Eigenschaften wie data, methods, computed und mounted definiert. Diese Struktur ist intuitiv für Einsteiger und macht den Code durch seine Vorhersehbarkeit leicht lesbar.
Die Composition API wurde mit Vue 3 eingeführt und ermöglicht es, Logik in sogenannte Composables auszulagern – wiederverwendbare Funktionen, die reaktive Zustände kapseln. Statt data() gibt es ref() und reactive(), statt computed gibt es die computed()-Funktion. Die Composition API ist flexibler und ermöglicht eine bessere Code-Organisation in großen Komponenten.
<script setup>-Syntaxzucker geschrieben werden. Dabei entfällt das manuelle return-Statement: Alle im Script deklarierten Variablen und Funktionen sind automatisch im Template verfügbar.
Template-Syntax und Direktiven
Vue-Templates sind erweitertes HTML. Doppelte geschweifte Klammern ({{ }}) binden Daten an den Text eines Elements. Direktiven beginnen mit v- und bieten zusätzliche Funktionalität:
- v-bind (Kurzschreibweise
:) – bindet Attribute dynamisch an Datenwerte - v-if / v-else-if / v-else – bedingte Darstellung von Elementen
- v-for – rendert eine Liste von Elementen
- v-model – bidirektionale Datenbindung für Formulareingaben
- v-on (Kurzschreibweise
@) – Event-Listener
Komponenten und Props
Vue-Anwendungen werden aus Komponenten aufgebaut. Jede Komponente ist eine in sich geschlossene Einheit mit eigenem Template, Logik und CSS. Eltern-Komponenten übergeben Daten an Kind-Komponenten über Props. Kind-Komponenten kommunizieren nach oben über Events (mit $emit). Dieses unidirektionale Datenflussmuster hält die Anwendungsarchitektur übersichtlich.
Slots ermöglichen es, den Inhalt einer Komponente von außen zu befehlen – ähnlich wie children in React. Named Slots erlauben mehrere Inhaltsbereiche in einer Komponente.
Vue Router
Für Single-Page-Anwendungen ist Vue Router die offizielle Lösung. Routen werden als Array von Objekten definiert, jedes mit einem Pfad und einer zugehörigen Komponente. Vue Router unterstützt verschachtelte Routen, dynamische Segmente, Navigation Guards für Authentifizierung und Lazy Loading von Komponenten für bessere Performance.
Pinia: State Management
Mit Vue 3 hat Pinia Vuex als empfohlene State-Management-Lösung abgelöst. Pinia ist leichter, hat eine intuitivere API und bietet erstklassige TypeScript-Unterstützung. Stores werden als Funktionen definiert, die ref() und computed() nutzen – genau wie die Composition API. Das DevTools-Plugin für Chrome und Firefox bietet Time-Travel-Debugging und State-Inspektion.
Nuxt.js als Meta-Framework
Für serverseitiges Rendering, statische Generierung und Full-Stack-Entwicklung mit Vue ist Nuxt.js die Standardwahl. Nuxt 3 basiert vollständig auf Vue 3 und bietet dateibasiertes Routing, automatisches Code-Splitting, Server-API-Routen und eine flexible Rendering-Strategie: SSR, SSG, ISR oder reine SPA – pro Route konfigurierbar. Die Nitro-Engine von Nuxt 3 ermöglicht Deployments auf Node.js, Cloudflare Workers, Vercel und vielen weiteren Plattformen.
Vue 3 Verbesserungen gegenüber Vue 2
Vue 3 ist nicht nur ein inkrementelles Update. Die Neuschreibung brachte bis zu 55 % kleinere Bundle-Größen, bis zu 2× schnelleres Server-Side-Rendering und ein vollständig überarbeitetes Reaktivitätssystem auf Proxy-Basis, das Array-Mutationen und das Hinzufügen neuer Eigenschaften korrekt erkennt. Fragments erlauben mehrere Root-Elemente in einem Template. Teleport ermöglicht das Rendern von Inhalten außerhalb des Komponenten-DOM-Baums.
Vergleich: Vue vs. React vs. Angular vs. Svelte
| Merkmal | Vue 3 | React 19 | Angular 17 | Svelte 5 |
|---|---|---|---|---|
| Lernkurve | Niedrig–Mittel | Mittel | Hoch | Niedrig |
| Bundle-Größe (Basis) | ~22 kB | ~42 kB | ~75 kB | ~3 kB |
| TypeScript-Support | Sehr gut | Sehr gut | Integriert | Gut |
| Ökosystem | Groß | Sehr groß | Groß | Klein |
| State Management | Pinia | Redux/Zustand | NgRx/Services | Eingebaut |
| Meta-Framework | Nuxt.js | Next.js | Analog | SvelteKit |
| Empfohlen für | SPAs, Mittelgroße Apps | Große Apps | Enterprise | Content-Seiten |
Häufig gestellte Fragen
- Soll ich die Options API oder die Composition API lernen?
- Für Einsteiger ist die Options API einfacher zu verstehen. Für neue Projekte und bei geplanter TypeScript-Nutzung empfiehlt das Vue-Team die Composition API mit
<script setup>. Beide APIs können im selben Projekt parallel verwendet werden. - Ist Vue.js auch für mobile Apps geeignet?
- Vue selbst ist für Web-Anwendungen konzipiert. Mit Frameworks wie Ionic Vue oder NativeScript-Vue lassen sich jedoch mobile Apps erstellen. Für native Apps ist React Native aktuell die ausgereiftere Option.
- Wie gut ist Vue im Vergleich zu React auf dem Arbeitsmarkt?
- React dominiert den Arbeitsmarkt deutlich, besonders in großen Unternehmen. Vue ist vor allem in kleineren und mittelständischen Unternehmen, in der Schweiz, Deutschland und Asien beliebt. Vue-Kenntnisse sind wertvoll, aber React-Kenntnisse eröffnen mehr Stellen.
- Kann Vue.js ohne Build-Tools verwendet werden?
- Ja, Vue kann über ein CDN eingebunden und direkt im Browser genutzt werden – ohne Node.js oder Build-Pipeline. Das ist ideal für einfache Interaktionen auf bestehenden HTML-Seiten oder für schnelle Prototypen.