Vue 3 Tutorial für Einsteiger: Grundlagen in 11 Kapiteln

Vue.js ist ein progressives JavaScript-Framework: Du kannst es mit einem einzigen script-Tag in eine bestehende Seite einhängen oder damit eine vollständige Anwendung samt Build-Tool bauen. Dieses Tutorial nimmt den zweiten Weg, den, dem die offizielle Dokumentation und praktisch jedes heutige Projekt folgt.

In elf Kapiteln baust du einen kleinen Shop: eine Produktseite mit Farbvarianten, einen Warenkorb, ein Bewertungsformular und die passenden Animationen. Jedes Konzept kommt genau dann, wenn die Anwendung es braucht, nie vorher.

Was du bauen wirst

Eine einzige Anwendung, Kapitel für Kapitel erweitert. Am Ende zeigt sie ein Produkt mit Bild, reagiert auf das Überfahren der Farben, deaktiviert den Button, wenn die Variante ausverkauft ist, füllt einen Warenkorb, nimmt geprüfte Bewertungen an und animiert deren Erscheinen.

Ab Kapitel 8 ist der Code in Komponenten zerlegt, wie in einem echten Projekt.

Der Weg durch elf Kapitel

1. Vue-Anwendung erstellen, das Projekt, createApp, der erste reaktive Wert.
2. Attribute binden, das Produktbild mit v-bind anzeigen.
3. Bedingtes Rendering, sagen, ob das Produkt verfügbar ist, mit v-if und v-show.
4. Listen rendern, die Materialzusammensetzung und die Varianten, mit v-for.
5. Events behandeln, der Button, der den Warenkorb füllt.
6. Klassen und Styles binden, die Farbpunkte und der deaktivierte Button.
7. Computed Properties, Bild und Verfügbarkeit aus der gewählten Variante ableiten.
8. Komponenten und Props, die Anwendung zerlegen und Daten weiterreichen.
9. Events nach oben melden, den Klick an die Elternkomponente weitergeben.
10. Formulare und v-model, das Bewertungsformular und seine Validierung.
11. Transitions, Erscheinen und Verschwinden animieren.

Der vollständige Code steht oben auf der Seite zum Download bereit: ein Vite-Projekt mit einem Verzeichnis pro Kapitel und der Testsuite, die jedes davon prüft.

Composition API: der Stil dieses Tutorials

Vue bietet zwei Arten, eine Komponente zu schreiben. Die Options API sortiert den Code in Optionen: data, methods, computed. Die Composition API schreibt ihn als schlichte Variablen und Funktionen in einem <script setup>-Block.

Dieses Tutorial nutzt die Composition API, weil die offizielle Dokumentation diesen Stil für neue Projekte empfiehlt und weil du ihm im Großteil des seit Vue 3 geschriebenen Codes begegnest. Beide Stile werden weiterhin unterstützt: Die Options API ist nicht deprecated, und in bestehenden Projekten läuft sie dir noch lange über den Weg.

Hier die Entsprechungstabelle, zum Nachschlagen.

// Composition API, in <script setup>

data() { return { n: 0 } }         const n = ref(0)
computed: { double() { … } }       const double = computed(() => …)
methods: { faire() { … } }         function faire() { … }
props: { titre: String }           const props = defineProps({ titre: String })
emits: ['valider']                 const emit = defineEmits(['valider'])
mounted() { … }                    onMounted(() => { … })
watch: { n(v) { … } }              watch(n, (v) => { … })

this.n                             n.value   // nur im Skript,
                                             // nie im Template

In jedem betroffenen Kapitel steht zum behandelten Konzept auch die Entsprechung in der Options API.

Was du brauchst

• Grundlagen von HTML, CSS und JavaScript. Wenn Ihnen Pfeilfunktionen und Destrukturierung nichts sagen, frischen Sie sie vor dem Start auf.
• Node.js 22.18 oder neuer (oder 24.12 und höher). Prüfen Sie mit node -v: Der offizielle Projektgenerator lehnt ältere Versionen ab. Aktualisieren Sie auch npm mit npm install -g npm@latest: Das mit Node 22 gelieferte npm 10 scheitert beim npm install eines neuen Vue-Projekts.
• Ein Code-Editor. Visual Studio Code mit der offiziellen Erweiterung „Vue – Official“ bietet Autovervollständigung in .vue-Dateien. WebStorm und Zed eignen sich ebenfalls.

Vue-2-Kenntnisse sind nicht nötig. Wenn du von dort kommst, merke dir: Vue.use, Vue.mixin und Vue.prototype gibt es nicht mehr, alles läuft jetzt über die Anwendungsinstanz, die createApp zurückgibt.

Wie du dieses Tutorial durcharbeitest

Tippe den Code ab, statt ihn zu kopieren. Mach nach jedem Kapitel absichtlich etwas kaputt und lies die Fehlermeldung: Das ist der beste Weg, sie entziffern zu lernen.

Jedes Kapitel endet mit einer Übung zum behandelten Konzept, die sich mit dem lösen lässt, was du gerade geschrieben hast.

Nach diesem Tutorial

Um die Anwendung an echte Daten zu hängen, sieh dir an, wie du Firebase in eine Vue-Anwendung einbaust.

Sind die elf Kapitel durch, folgt logisch das Teilen von State zwischen Komponenten mit Pinia, danach das Routing mit Vue Router. Auf der Architekturseite: wie du eigene Vue-Plugins schreibst und wie du das Ranking einer Vue-Anwendung in den Griff bekommst.