Vue Lernen: Programmieren
Vue Lernen: Programmieren — Lerne Vue.js, indem du Komponenten auf deinem Smartphone erstellst
Vue Lernen: Programmieren ist eine kostenlos startbare iOS- und Android-App, die Anfängern mit grundlegenden HTML- und JavaScript-Kenntnissen sowie Entwicklern beim Wechsel von der Options API zur Composition API Vue.js beibringt. Sie umfasst 42 Kurse und 156 Lektionen – von deinem ersten Template bis zu Pinia, Vue Router und Nuxt 3. Single-File-Komponenten werden auf deinem Gerät kompiliert – deshalb laufen die 20 angeleiteten Projekte, die Missionen und das Vue Lab ohne Server.
- Preis
- Kostenlos, Upgrade auf Pro
- Plattformen
- iOS und Android
- Sprachen
- 22
- Altersfreigabe
- 4+
- Version
- 82.6.0
- Erfordert
- iOS 15.1 oder neuer
- App Store
- 3.0 ★ (2)
Eine Komponente lässt sich leichter verstehen, wenn du selbst eine kaputtgemacht hast.
Das Vue Lab gibt dir jeden Tag eine kaputte Komponente und fordert dich auf, den Fehler zu finden. Du kannst die Props einer Komponente mit Live-Steuerelementen anpassen und sehen, wie sich der Zustand beim Klicken verändert. Single-File-Komponenten werden auf dem Smartphone kompiliert, sodass die Vorschau direkt vor deinen Augen kaputtgeht und wieder funktioniert – mit einer Fehlerkarte, die dir sagt, was schiefgelaufen ist.
Was es ist
Vue Lernen: Programmieren ist eine kostenlose iOS- und Android-App, die dir Vue.js in 42 Kursen und 156 Lektionen beibringt – von Template-Syntax und Datenbindung über die Composition API, Pinia, Vue Router und TypeScript bis zu Nuxt 3, Testing mit Vitest und Full-Stack-Apps. Single-File-Komponenten werden auf dem Gerät kompiliert, sodass angeleitete Projekte, Coding-Missionen und ein praxisnahes Vue Lab ohne Server auf dem Smartphone laufen. Ein KI-Mentor in Pro erklärt dir außerdem Code und Fehler.
In der App
So sieht es aus
Der Kurs
Das behandelt der Vue-Kurs
42 Kurse und 156 Lektionen aus der kursinternen Liste der App – vom ersten Template bis zum serverseitigen Rendering und Produktionsmustern.
Erste Schritte mit Vue.js
Einführung in Vue.js, die Vue CLI und die Projektstruktur, Template-Syntax und Datenbindung.
Reaktivität und die Composition API
Grundlagen der Vue 3 Composition API, die script-setup-Syntax, Reaktivität und berechnete Eigenschaften sowie Vue-Direktiven.
Komponenten und Formulare
Grundlagen von Komponenten und ihrer Kommunikation, Slots, provide und inject, Formulare und Validierung sowie der Lebenszyklus von Komponenten.
Wiederverwenden und verfeinern
Vue 3 Composables, Übergänge und Animationen, Fehlerbehandlung sowie Renderfunktionen und JSX.
State und Routing
State-Management mit Pinia, Vuex, Routing mit Vue Router und fortgeschrittene Router-Muster sowie der Umgang mit APIs und asynchronen Daten.
TypeScript, i18n und Tooling
TypeScript mit Vue 3, Internationalisierung, Storybook-Integration sowie das Bereitstellen und Warten von Vue-Apps.
Nuxt 3, Testing und Echtzeit
Serverseitiges Rendering mit Nuxt 3, Komponententests mit Vitest, GraphQL mit Apollo und Echtzeit-Apps mit WebSockets.
Produktionsmuster
Performance, Best Practices für Sicherheit, Plugin-Entwicklung, das Veröffentlichen einer Komponentenbibliothek, Progressive Web Apps und Microfrontends.
So funktioniert es
So lernst du Vue in der App
Jeder Kurs ist nach Niveau geordnet. Jede Lektion nach dem kostenlosen ersten Kurs beginnt mit einer kostenlosen Vorschau, sodass du sehen kannst, wie ein Thema aussieht, bevor du dich entscheidest, weiterzumachen.
Beginne mit „Introduction to Vue.js“
Der erste Kurs ist kostenlos und beginnt mit den Grundlagen: Was Vue ist, wie du die Umgebung einrichtest und eine Hello-Vue-Anwendung erstellst. Die Kurse sind mit A1 bis C1 gekennzeichnet, sodass klar ist, wo du anfangen solltest und was als Nächstes kommt.
Erstelle und starte Komponenten auf dem Smartphone
Bearbeite eine Single-File-Komponente und sieh dir sofort die Vorschau an. In angeleiteten Projekten wächst eine App Schritt für Schritt. Mit App Studio kannst du aus fertigen Blueprints Apps mit mehreren Bildschirmen, einem Router und einem Store erstellen.
Übe im Vue Lab
Finde den täglichen Fehler, triff in Style Lab ein vorgegebenes Design, tritt in Speed-Build-Duellen gegen die Zeit an oder schreibe eine Options-API-Komponente im Composition-Stil neu.
Was steckt drin
Das bietet die App
42
Kurse, 156 Lektionen
Von Template-Syntax und Direktiven über Lifecycle, Slots, provide und inject sowie Composables bis zu Nuxt 3, GraphQL, PWAs und Micro-Frontends.
20
Angeleitete Projekte
Lass eine App Schritt für Schritt wachsen – mit Single-File-Komponenten, die direkt auf deinem Gerät kompiliert werden, und einer Fehlerkarte, wenn eine Vorschau nicht funktioniert.
28
Coding-Missionen
Übungen von leicht bis anspruchsvoll sowie App-Studio-Blueprints für Apps mit mehreren Bildschirmen, einem Router und einem Store.
Lab
Vue Lab
Ein Inspektor für Reaktivität, eine tägliche Fehlersuche, 12 Style-Lab-Level, Speed-Build-Duelle, ein Dojo für die Umwandlung von der Options API zur Composition API und eine My Components-Bibliothek, die du als Bildkarte teilen kannst.
Interview
Vue-Interviewfragen
Fragen für Bewerbungsgespräche für Frontend-Entwickler – mit Quizzen, Lernkarten-Wiederholungen und einem Spickzettel, den du jederzeit öffnen kannst.
KI
KI-Mentor (Pro)
Frage nach einem Konzept oder Fehler, lass dir deinen Code erklären oder erstelle eine individuelle Lektion zu jedem Thema, das du lernen möchtest.
Hintergrund
Was ist Vue.js und was sollte ein Anfänger zuerst lernen?
Vue ist ein JavaScript-Framework zum Erstellen interaktiver Weboberflächen aus Komponenten: kleinen, wiederverwendbaren Bausteinen, die jeweils einen Teil des Templates, der Logik und des Styles enthalten. Für Anfänger ist Vue attraktiv, weil der Einstieg leichtfällt: Du kannst mit einfachem HTML und etwas JavaScript beginnen und nach und nach Struktur hinzufügen. Eine sinnvolle Reihenfolge sind Templates und Datenbindung, danach Reaktivität und Komponenten, dann die Composition API und erst anschließend Routing, State Management und serverseitiges Rendern.
Reaktivitätdie Idee im Mittelpunkt
Du änderst einen Datenwert, und der Bildschirm, der davon abhängt, aktualisiert sich automatisch. Wenn du verstehst, welche Werte reaktiv sind und was berechnete Eigenschaften und Watcher zusätzlich leisten, verschwinden die meisten anfänglichen Unklarheiten in Vue.
Options API und Composition APIzwei Möglichkeiten, eine Komponente zu schreiben
Die ältere Options API gruppiert Code nach Typ, etwa Daten und Methoden. Die Composition API mit script setup gruppiert ihn nach Funktion und macht wiederverwendbare Composables einfach. Viele Tutorials und Codebasen verwenden weiterhin beide Varianten – deshalb ist es nützlich, beide lesen zu können.
Pinia, Vuex und der Routerwas eine echte App zusätzlich braucht
Sobald eine App mehrere Bildschirme hat, braucht sie Routing, um zwischen ihnen zu wechseln, und einen gemeinsamen Store für Daten, die mehr als eine Komponente verwendet. Pinia ist der aktuelle Store für Vue, während Vuex der frühere ist, der in vielen bestehenden Projekten noch verwendet wird.
Nuxt und serverseitiges Rendernwenn Suche und Geschwindigkeit wichtig sind
Nuxt baut auf Vue auf und rendert Seiten auf dem Server, was den ersten Ladevorgang und die Sichtbarkeit in Suchmaschinen verbessert. Normalerweise ist das ein Thema für die zweite Lernphase – nachdem Komponenten, Routing und State vertraut sind.
Passend
Für wen es geeignet ist – und für wen nicht
Es passt zu dir, wenn du
- Du kennst dich ein wenig mit HTML und JavaScript aus und möchtest dein erstes Framework lernen
- Du wechselst von der Options API zur Composition API oder von Vuex zu Pinia
- Du bereitest dich auf ein Vorstellungsgespräch als Vue.js-Entwickler oder deinen ersten Job im Frontend-Bereich vor
- Du lernst besser, wenn du eine fehlerhafte Komponente reparierst, statt über sie zu lesen
- Du möchtest kurze Lerneinheiten, die du unterwegs absolvieren kannst
Du bist hier nicht richtig, wenn du
- Du hast noch nie HTML oder JavaScript gesehen – beginne zuerst mit einem JavaScript-Kurs
- Du möchtest eine produktive App von deinem Smartphone aus veröffentlichen – dafür ist ein Laptop weiterhin das geeignete Gerät
- Du erwartest, dass alles kostenlos ist: Der erste Kurs und Vorschauen sind kostenlos, Pro schaltet den vollständigen Lehrplan frei
- Du möchtest offizielle Vue.js-Inhalte – dies ist eine unabhängige Lern-App
Fragen
Häufig gestellte Fragen
Wie lernt man Vue.js am besten auf dem Smartphone?
Lerne, indem du Komponenten ausführst, statt nur darüber zu lesen. Vue Lernen: Programmieren kompiliert Single-File-Komponenten direkt auf dem Gerät, sodass die 20 geführten Projekte, 28 Missionen und das Vue Lab vollständig auf dem Smartphone laufen. Kurze Lektionen in 42 Kursen führen dich von der Template-Syntax bis zu Nuxt 3 – mit einem kostenlosen ersten Kurs zum Einstieg.
Bringt die App die Composition API und Pinia bei?
Ja. Vue Lernen: Programmieren bietet Kurse zu den Grundlagen der Vue 3 Composition API, der script-setup-Syntax, Composables und dem State-Management mit Pinia sowie zum älteren Vuex für bestehende Projekte. In einem Options-to-Composition-API-Dojo im Vue Lab kannst du klassische Komponenten im modernen Stil neu schreiben.
Was ist der Unterschied zwischen der Options API und der Composition API in Vue?
Die Options API gruppiert den Code einer Komponente nach Typ, etwa data, methods und computed. Die Composition API mit script setup gruppiert ihn dagegen nach Funktion und erleichtert die Wiederverwendung von Composables. Vue Lernen: Programmieren vermittelt die Composition API mit script setup und enthält im Vue Lab ein Options-to-Composition-API-Dojo, in dem du klassische Komponenten im modernen Stil neu schreiben kannst.
Muss ich JavaScript können, bevor ich Vue lerne?
Ein wenig HTML und JavaScript helfen sehr. Vue Lernen: Programmieren richtet sich an Anfänger, die die Grundlagen kennen und ihr erstes Framework lernen möchten. Deshalb werden die Vue-Konzepte von Anfang an erklärt, JavaScript selbst wird jedoch nicht vermittelt. Wenn Variablen und Funktionen für dich neu sind, solltest du zuerst einen JavaScript-Kurs absolvieren.
Was ist das Vue Lab?
Das Vue Lab ist der Übungsbereich in Vue Lernen: Programmieren. Es bietet einen Reaktivitätsinspektor, eine tägliche Fehlersuche mit einer fehlerhaften Komponente, Style-Lab-Level, in denen du ein Zieldesign mit CSS nachbildest, Speed-Build-Duelle, ein Options-to-Composition-API-Dojo und eine My Components-Bibliothek mit deinen erstellten Komponenten.
Behandelt die App Nuxt 3 und serverseitiges Rendering?
Ja. Die fortgeschrittenen Kurse in Vue Lernen: Programmieren behandeln serverseitiges Rendering mit Nuxt 3, SSR-Streaming mit Suspense und Full-Stack-Vue mit Fastify und Authentifizierung – zusätzlich zu Komponententests mit Vitest und Echtzeit-Apps mit WebSockets.
Hilft die App bei Vorstellungsgesprächen zu Vue.js?
Ja. Vue Lernen: Programmieren enthält Vue-Interviewfragen für Frontend-Entwicklerstellen sowie Quizze, Wiederholungseinheiten mit Karteikarten und einen Spickzettel. Die zugrunde liegenden Kurse behandeln Reaktivität, den Lebenszyklus, Composables und State-Management – alles häufige Themen in Vorstellungsgesprächen.
Ist Vue Lernen: Programmieren kostenlos?
Die App kann kostenlos heruntergeladen werden. Der erste Kurs, eine Vorschau auf jede Lektion, das erste geführte Projekt, die erste Mission, die tägliche Fehlersuche, drei Style-Lab-Level, Quizze, Interviewfragen und der Spickzettel sind kostenlos. Die kostenlose Version enthält Werbung. Pro schaltet den vollständigen Lehrplan und das vollständige Lab, den KI-Mentor und die Zertifikatsprüfung frei und entfernt die Werbung.
Wurde die App vom Vue.js-Team entwickelt?
Nein. Vue Lernen: Programmieren ist eine unabhängige Lern-App und steht weder mit dem Vue.js-Projekt in Verbindung noch wird sie von ihm unterstützt. Die App vermittelt Vue.js als Open-Source-Framework in eigenen Kursen und Übungen.
Gibt es ein Zertifikat?
Ja. Wenn du die Abschlussprüfung bestehst, die Teil von Pro ist, erhältst du ein Abschlusszertifikat. Es dokumentiert deine geleistete Arbeit und ist kein akkreditierter Bildungsabschluss. Am sinnvollsten ist es daher zusammen mit Komponenten und Projekten, die du erklären kannst.
Welche Plattformen und Sprachen werden unterstützt?
Vue Lernen: Programmieren läuft auf dem iPhone über den App Store (iOS 15.1 oder neuer) und auf Android über Google Play. Die Benutzeroberfläche ist in 22 Sprachen verfügbar, und die App ist im App Store ab 4 Jahren freigegeben.
Loslegen
Erstelle noch heute deine erste Vue-Komponente
Kostenloser Einstieg auf iOS und Android in 22 Sprachen.
Mehr von CoddyKit
Verfügbar auf iOS und Android.