Was ist Vue.js? So entwickelst du moderne Apps

Wichtige Erkenntnisse

Schneller Einstieg ohne neue Sprache
Reaktivität macht Entwicklung effizient
Komponenten sorgen für saubere Struktur
Ideal für moderne Web-Apps

Moderne Web-Apps müssen schnell, flexibel und wartbar sein – gleichzeitig erwarten Nutzer ein reibungsloses Erlebnis ohne Ladeverzögerungen. Genau hier setzen moderne JavaScript-Frameworks wie Vue.js an. In diesem Vue.js-Tutorial zeigen wir dir Schritt für Schritt, wie du mit Vue startest, erste Anwendungen entwickelst und eigene Projekte professionell strukturierst.

Du lernst nicht nur die Grundlagen kennen, sondern arbeitest direkt mit praxisnahen Code-Beispielen. Vom ersten Hello-World-Projekt bis zur sauberen Komponentenstruktur begleiten wir dich durch alle wichtigen Konzepte. Bevor du jedoch mit dem Coden beginnst, schauen wir uns zunächst an, was Vue.js ist und warum sich das Framework für moderne Web-Apps besonders lohnt.

Vue.js Tutorial für Anfänger: Was ist Vue.js?

Wenn du nach einem Vue-Tutorial suchst, willst du vor allem eines wissen: Was genau ist Vue.js – und warum solltest du es verwenden?

Vue.js ist ein progressives JavaScript-Framework zur Entwicklung moderner Benutzeroberflächen. „Progressiv“ bedeutet: Du kannst es schrittweise einsetzen. Ob kleines Widget auf einer bestehenden Website oder vollständige Single-Page-Application – Vue passt sich deinem Projekt an.

Im Kern basiert Vue.js auf drei bekannten Web-Technologien:

HTML für die Struktur
CSS für das Design
JavaScript für Logik und Interaktivität

Du musst also keine neue Sprache lernen.

Warum ist Vue.js so beliebt?

Vue.js kombiniert mehrere Vorteile, die es gerade für Anfänger und kleine bis mittelgroße Projekte attraktiv machen:

1. Geringe Einstiegshürde
Die Syntax ist klar und verständlich. Viele Entwickler empfinden Vue als intuitiver als andere Frameworks.

2. Sehr hohe Performance
Dank virtuellem DOM (Document Object Model) und effizientem Rendering aktualisiert Vue nur die Elemente, die sich wirklich ändern. Das sorgt für schnelle Reaktionszeiten deiner App.

3. Schlanke Größe
In der Minimalversion ist Vue extrem kompakt – ideal für performante Webanwendungen.

4. Komponentenbasierte Architektur
Du baust deine Anwendung aus wiederverwendbaren Bausteinen auf. Das macht dein Projekt übersichtlich und skalierbar.

Sidekick: Vue.js im Vergleich zu React und Angular

In vielen Diskussionen taucht Vue neben React und Angular auf. Der Unterschied liegt vor allem in der Komplexität und Philosophie.

Während Angular stark strukturiert und umfangreich ist und React oft zusätzliche Bibliotheken benötigt, bietet Vue eine ausgewogene Mischung aus Einfachheit und Leistungsfähigkeit.

Ein typischer Vorteil:
Vue optimiert Rendering-Prozesse automatisch. In React musst du teilweise manuell eingreifen (z. B. mit shouldComponentUpdate), um unnötige Re-Renders zu vermeiden. Vue nimmt dir diese Arbeit ab.

Für dich bedeutet das:
Weniger Boilerplate-Code, schneller produktiv werden und trotzdem professionelle Ergebnisse erzielen.

Für wen eignet sich dieses Vue-Tutorial?

Dieses vue js Tutorial richtet sich an:

JavaScript-Einsteiger
Frontend-Entwickler, die von jQuery oder Vanilla JS kommen
Entwickler, die React oder Angular vergleichen möchten
Teams, die schnell performante Interfaces umsetzen wollen

Vue.js installieren

Bevor du dein erstes Projekt startest, musst du Vue.js installieren. In diesem Vue Tutorial zeigen wir dir die drei gängigsten Wege – je nachdem, ob du nur testen oder direkt professionell entwickeln möchtest.

1. Schnellstart per CDN (ideal für Einsteiger)

Wenn du Vue.js erst einmal ausprobieren willst, kannst du es direkt über ein CDN (Content Delivery Network) einbinden. Dafür fügst du in deiner HTML-Datei einfach folgenden Script-Tag ein:

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

Damit kannst du sofort loslegen – ganz ohne Installation oder Build-Prozess. Diese Methode eignet sich perfekt für erste Vue.js Examples oder kleine Experimente.

Vorteil:

Kein Setup nötig
Ideal für Lernzwecke

Nachteil:

Nicht optimal für größere oder skalierbare Projekte

2. Installation mit NPM (empfohlen für echte Projekte)

Wenn du ernsthaft mit Vue arbeiten möchtest, solltest du Node.js installiert haben. Anschließend kannst du Vue über NPM (Node Package Manager) einrichten.

Zuerst installierst du das offizielle Projekt-Tool (Vite ist aktuell Standard für Vue 3):

npm create vue@latest

Danach beantwortest du einige Fragen zur Projektkonfiguration. In vielen Fällen kannst du die Standardoptionen übernehmen.

Anschließend:

cd dein-projektname
npm install
npm run dev

Jetzt läuft deine Entwicklungsumgebung lokal im Browser.

Diese Variante ist ideal, wenn du ein vollständiges Vue js Tutorial Projekt umsetzen willst.

3. Vue CLI (klassischer Weg)

Alternativ kannst du auch die Vue CLI (Command Line Interface) verwenden:

npm install -g @vue/cli
vue create my-project

Die CLI bietet dir zusätzliche Konfigurationsoptionen, etwa TypeScript-Support oder Router-Integration.

Welche Variante solltest du wählen?

Nur testen? → CDN
Lernprojekt oder Portfolio-App? → NPM + Vite
Komplexe Anwendung mit vielen Features? → CLI oder moderne Toolchain

Für dieses Vue Tutorial arbeiten wir mit einer lokalen Entwicklungsumgebung, damit du realistische Projektbedingungen kennenlernst.

Vue Tutorial: Dein erstes Projekt (Hello World)

Jedes gute Vue Tutorial beginnt mit einem Klassiker: „Hello World“. Damit verstehst du sofort, wie Vue Daten verarbeitet und im Browser ausgibt.

Wir starten bewusst einfach – damit du das Grundprinzip hinter Vue.js verstehst, bevor es komplexer wird.

Schritt 1: Grundstruktur erstellen

Lege eine neue HTML-Datei an und binde Vue ein (z. B. per CDN):

<!DOCTYPE html>
<html>
<head>
  <title>Vue Hello World</title>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>

  <div id="app">
    {{ message }}
  </div>

  <script>
    const { createApp } = Vue;

    createApp({
      data() {
        return {
          message: "Hello World!"
        }
      }
    }).mount("#app");
  </script>

</body>
</html>

Sobald du die Datei im Browser öffnest, wird „Hello World!“ angezeigt.

Was passiert hier?

createApp() erstellt deine Vue-Anwendung
data() definiert deine reaktiven Daten
{{ message }} ist eine sogenannte Mustache-Syntax zur Ausgabe
.mount("#app") verbindet Vue mit deinem HTML-Element

Das ist das Herzstück jedes Vue.js Tutorial-Projekts:
Daten werden im JavaScript definiert und automatisch im HTML gerendert.

Schritt 2: Reaktivität testen (v-model)

Vue ist reaktiv. Das bedeutet: Wenn sich Daten ändern, aktualisiert sich die Oberfläche automatisch.

Erweitere dein Beispiel:

<div id="app">
  <p>{{ message }}</p>
  <input v-model="message">
</div>

Jetzt kannst du in das Eingabefeld schreiben – und der Text oben verändert sich sofort.

Das ist eines der einfachsten, aber wirkungsvollsten vue.js Examples für Einsteiger: Zwei-Wege-Datenbindung mit v-model.

Du musst keinen zusätzlichen Event-Listener schreiben. Vue übernimmt das für dich.

Warum ist das wichtig?

Dieses kleine Beispiel zeigt dir bereits drei zentrale Konzepte:

Reaktive Daten
Datenbindung im Template
Automatische DOM-Aktualisierung

Und genau deshalb eignet sich Vue besonders gut für Anfänger:
Mit sehr wenig Code erreichst du sichtbare Ergebnisse.

Vue JS Examples: Zentrale Konzepte verstehen

Nachdem du dein erstes Hello-World-Beispiel umgesetzt hast, schauen wir uns nun weitere zentrale Konzepte an. Diese Vue JS Examples helfen dir, das Framework wirklich zu verstehen und eigene Anwendungen strukturiert aufzubauen.

1. Bedingungen mit v-if

Mit v-if kannst du Inhalte abhängig von einer Bedingung anzeigen oder ausblenden.

<div id="app">
  <p v-if="isVisible">Dieser Text ist sichtbar</p>
  <button @click="isVisible = !isVisible">Toggle</button>
</div>

<script>
const { createApp } = Vue

createApp({
  data() {
    return {
      isVisible: true
    }
  }
}).mount("#app")
</script>

Hier steuerst du die Sichtbarkeit eines Elements mit einer Boolean-Variable. Vue rendert das Element nur, wenn die Bedingung erfüllt ist. Das ist ein klassisches Example Vue.js für dynamische Oberflächen.

2. Listen mit v-for

Mit v-for kannst du Arrays durchlaufen und dynamisch ausgeben.

<div id="app">
  <ul>
    <li v-for="item in items" :key="item">
      {{ item }}
    </li>
  </ul>
</div>

<script>
const { createApp } = Vue

createApp({
  data() {
    return {
      items: ["HTML", "CSS", "JavaScript", "Vue"]
    }
  }
}).mount("#app")
</script>

Dieses Vue JS Example zeigt dir, wie einfach wiederkehrende Strukturen umgesetzt werden können. Besonders bei Daten aus APIs ist das essenziell.

3. Events mit @click

Vue vereinfacht Event-Handling erheblich.

<div id="app">
  <p>Zähler: {{ count }}</p>
  <button @click="count++">Erhöhen</button>
</div>

<script>
const { createApp } = Vue

createApp({
  data() {
    return {
      count: 0
    }
  }
}).mount("#app")
</script>

Mit @click reagierst du direkt auf Benutzerinteraktionen. Kein manuelles DOM-Handling nötig.

4. Computed Properties

Computed Properties sind berechnete Werte, die sich automatisch aktualisieren, wenn sich abhängige Daten ändern.

<div id="app">
  <input v-model="firstName" placeholder="Vorname">
  <input v-model="lastName" placeholder="Nachname">
  <p>Vollständiger Name: {{ fullName }}</p>
</div>

<script>
const { createApp } = Vue

createApp({
  data() {
    return {
      firstName: "",
      lastName: ""
    }
  },
  computed: {
    fullName() {
      return this.firstName + " " + this.lastName
    }
  }
}).mount("#app")
</script>

Dieses Beispiel zeigt die Stärke von Vue besonders gut: Du trennst Logik sauber von der Darstellung, ohne komplizierte Event-Ketten.

Warum sind diese Beispiele wichtig? Diese Vue JS Examples bilden das Fundament jeder Anwendung. Wenn du Bedingungen, Listen, Events und berechnete Eigenschaften verstanden hast, kannst du bereits komplexe Benutzeroberflächen entwickeln.

Komponenten in Vue.js erstellen: Bausteine für skalierbare Apps

Sobald deine Anwendung wächst, solltest du deinen Code strukturieren. Genau hier kommen Komponenten ins Spiel. In Vue.js baust du deine App aus wiederverwendbaren, eigenständigen Bausteinen auf.

Statt alles in einer Datei zu verwalten, zerlegst du deine Oberfläche in kleine, logische Einheiten. Das sorgt für Übersichtlichkeit, Wiederverwendbarkeit und bessere Wartbarkeit.

Was ist eine Komponente?

Eine Komponente ist ein eigener Bereich deiner Anwendung mit:

eigener Template-Struktur
eigener Logik
optional eigenem Styling

In größeren Projekten arbeitest du meist mit sogenannten Single File Components (.vue-Dateien).

Einfaches Komponenten-Beispiel

Angenommen, du möchtest eine wiederverwendbare Begrüßungskomponente erstellen.

Erstelle eine Datei namens Greeting.vue:

<template>
  <div>
    <h2>Hallo {{ name }}!</h2>
    <button @click="changeName">Name ändern</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: "Max"
    }
  },
  methods: {
    changeName() {
      this.name = "Anna"
    }
  }
}
</script>

<style scoped>
h2 {
  color: #42b983;
}
</style>

Hier siehst du die typische Struktur einer Vue-Komponente:

<template> enthält das HTML
<script> enthält Logik und Daten
<style> enthält optional CSS

Alles in einer Datei – sauber getrennt und dennoch kompakt.

Komponente in App.vue verwenden

Nun bindest du die Komponente in deiner Hauptdatei ein.

<template>
  <div>
    <Greeting />
  </div>
</template>

<script>
import Greeting from "./components/Greeting.vue"

export default {
  components: {
    Greeting
  }
}
</script>

Jetzt wird deine neue Komponente innerhalb der Hauptanwendung gerendert.

Daten an Komponenten übergeben (Props)

Oft sollen Komponenten dynamische Daten erhalten. Dafür nutzt du Props.

Beispiel:

<Greeting name="Lisa" />

In der Komponente definierst du:

export default {
  props: ["name"]
}

Damit wird deine Komponente flexibel und wiederverwendbar.

Warum sind Komponenten so wichtig? Komponenten spielen eine zentrale Rolle. Sie ermöglichen:

Saubere Projektstruktur
Wiederverwendbare UI-Elemente
Bessere Teamarbeit
Skalierbare Anwendungen

Sobald du Komponenten verstanden hast, denkst du nicht mehr in einzelnen Seiten, sondern in modularen Bausteinen.

Größere Projekte mit Vue.js vorbereiten

Sobald dein Projekt mehr als nur ein paar kleine Vue.js Examples enthält, brauchst du eine saubere Entwicklungsumgebung. In diesem Teil unseres Vue Tutorials richtest du dein Projekt professionell ein.

Für ernsthafte Anwendungen solltest du Vue lokal installieren und mit einer modernen Build-Umgebung arbeiten. Das sorgt für bessere Performance, saubere Struktur und produktionsreife Builds.

Schritt 1: Node.js installieren

Bevor du startest, benötigst du Node.js. Falls noch nicht installiert, lade die aktuelle LTS-Version herunter und installiere sie.

Anschließend kannst du im Terminal prüfen, ob alles funktioniert:

node -v
npm -v

Werden Versionsnummern angezeigt, bist du startklar.

Schritt 2: Neues Vue-Projekt erstellen

Für Vue 3 wird in der Regel Vite als Build-Tool verwendet. Erstelle dein Projekt mit:

npm create vue@latest

Du wirst nun durch einige Konfigurationsfragen geführt, zum Beispiel:

TypeScript verwenden?
Vue Router hinzufügen?
State Management (Pinia) integrieren?
Linting-Tools aktivieren?

Für ein Lernprojekt kannst du die Standardoptionen übernehmen.

Schritt 3: Abhängigkeiten installieren

Wechsle in dein Projektverzeichnis:

cd dein-projektname

Installiere nun alle benötigten Pakete:

npm install

Schritt 4: Entwicklungsserver starten

Starte deine App mit:

npm run dev

Im Terminal erscheint eine lokale URL, meist etwa:

http://localhost:5173/

Rufe diese Adresse im Browser auf – und deine erste vollständige Vue-App läuft.

Damit hast du aus einem einfachen Vue-Tutorial-Beispiel ein echtes Projekt gemacht.

Warum ist diese Struktur wichtig?

Bei größeren Anwendungen brauchst du:

Modulstruktur
Komponentenverzeichnis
Saubere Trennung von Logik und Layout
Optimierten Produktions-Build

Mit dem Entwicklungsserver profitierst du außerdem von:

Hot Module Replacement (Änderungen werden sofort sichtbar)
Automatischer Fehleranzeige
Optimierter Build-Performance

Das ist der entscheidende Unterschied zwischen einem einfachen Example in vue.js und einer produktionsreifen Anwendung.

Ordnerstruktur und Projektaufbau verstehen

Wenn du dein Projekt mit Vite oder der Vue CLI erstellt hast, wurde automatisch eine saubere Grundstruktur angelegt. Diese Struktur ist ein zentraler Bestandteil jedes professionellen Vue JS Tutorials, denn sie sorgt dafür, dass dein Projekt skalierbar bleibt.

Typischerweise sieht deine Ordnerstruktur ungefähr so aus:

my-project/
├─ node_modules/
├─ public/
├─ src/
│  ├─ assets/
│  ├─ components/
│  ├─ App.vue
│  └─ main.js
├─ package.json
└─ vite.config.js

Schauen wir uns die wichtigsten Bereiche genauer an.

node_modules

Hier liegen alle installierten Abhängigkeiten deines Projekts. Diesen Ordner bearbeitest du nicht manuell. Er wird automatisch durch npm install erstellt.

public

Favicon
Bilder
statische HTML-Dateien

Im public-Ordner befinden sich statische Dateien, die unverändert ausgeliefert werden, zum Beispiel:

src – das Herz deiner Anwendung

Der src-Ordner ist der wichtigste Bereich deines Projekts. Hier entwickelst du deine Anwendung.

Wichtige Bestandteile:

assets/
Hier speicherst du Bilder, Styles oder andere Ressourcen, die im Build-Prozess verarbeitet werden.

components/
In diesem Ordner liegen deine wiederverwendbaren Komponenten. Jede Datei enthält typischerweise eine Single File Component (.vue).

App.vue
Die Root-Komponente deiner Anwendung. Von hier aus wird deine gesamte App strukturiert.

main.js
Der Einstiegspunkt deiner Anwendung. Hier wird Vue initialisiert und an das HTML-Dokument gebunden.

Beispiel für eine typische main.js:

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

Hier wird deine Hauptkomponente App.vue geladen und in das DOM eingebunden.

Warum ist diese Struktur so wichtig?

Ein gutes Vue-Tutorial endet nicht bei kleinen Beispielen. Sobald dein Projekt wächst, brauchst du:

klare Trennung von Komponenten
saubere Dateistruktur
nachvollziehbare Zuständigkeiten

Mit dieser Struktur kannst du:

neue Features leichter integrieren
im Team effizient arbeiten
Wartbarkeit langfristig sichern

Das ist der Schritt vom einfachen Example vue.js zur professionellen Web-App.

Im nächsten Abschnitt klären wir, wann sich Vue.js besonders lohnt und für welche Projekte es die richtige Wahl ist.

Wann solltest du Vue.js einsetzen?

Nach diesem ausführlichen Vue Tutorial stellt sich eine wichtige Frage: Für welche Projekte ist Vue.js wirklich die richtige Wahl? Grundsätzlich eignet sich Vue besonders gut, wenn du moderne, interaktive Benutzeroberflächen entwickeln möchtest – ohne unnötige Komplexität.

Ideal für kleine bis mittelgroße Projekte

Vue spielt seine Stärken vor allem dann aus, wenn:

du schnell ein MVP (Minimum Viable Product) entwickeln möchtest
du ein bestehendes Projekt schrittweise modernisieren willst
du ein performantes Frontend ohne riesigen Overhead brauchst

Da Vue progressiv einsetzbar ist, kannst du es auch nur für einzelne Komponenten oder Widgets nutzen. Genau das unterscheidet es von schwergewichtigeren Frameworks.

Sehr gut geeignet für Single-Page-Applications (SPAs)

Wenn deine Anwendung:

viele dynamische Inhalte enthält
ohne ständiges Neuladen funktionieren soll
API-Daten verarbeitet

dann ist Vue eine hervorragende Wahl.

In Kombination mit Vue Router und State-Management (z. B. Pinia) lassen sich auch größere Anwendungen strukturiert umsetzen.

Wann ist Vue vielleicht nicht ideal?

Vue kann an Grenzen stoßen, wenn:

extrem große Enterprise-Anwendungen mit strengen Architekturvorgaben umgesetzt werden
sehr spezielle Build- oder Performance-Anforderungen bestehen
bestehende Teams bereits vollständig auf ein anderes Ökosystem spezialisiert sind

In den meisten Webprojekten bietet Vue jedoch eine hervorragende Balance zwischen Flexibilität, Performance und Lernaufwand.

Fazit: Mit Vue.js schnell zur eigenen modernen Web-App

Vue.js ist ein leistungsfähiges, aber zugleich leicht zugängliches Framework für moderne Webanwendungen. In diesem Vue Tutorial hast du gelernt, wie du Vue installierst, erste Beispiele umsetzt und dein Projekt professionell strukturierst.

Vom einfachen Hello-World-Beispiel über reaktive Datenbindung, Events und Computed Properties bis hin zu modularen Komponenten und einer sauberen Projektarchitektur – Vue bietet dir alle Werkzeuge, um skalierbare Anwendungen effizient zu entwickeln.

Besonders stark ist Vue in folgenden Bereichen:

Schneller Einstieg ohne neue Programmiersprache
Klare und verständliche Syntax
Hohe Performance dank effizientem Rendering
Komponentenbasierte Struktur für wartbaren Code

Ob kleine interaktive Widgets oder vollständige Single-Page-Applications: Mit Vue kannst du Projekte flexibel umsetzen und schrittweise erweitern.

Wenn du die hier gezeigten Vue JS Examples verstanden hast, verfügst du bereits über ein solides Fundament. Von hier aus kannst du dich mit Themen wie Routing, State-Management oder API-Integration beschäftigen – und deine Anwendungen weiter professionalisieren.

Vue kombiniert Einfachheit mit Leistungsfähigkeit – und genau das macht es für viele Entwickler zur idealen Wahl.