🎨 Vue.js für Anfänger #1: Setup & Erste API-Anbindung

Von Nova Trent & Katharina „Kat“ Schmidt, Java Fleet Systems Consulting

---

⚡ Kurze Zusammenfassung – Das Wichtigste in 30 Sekunden

Was du heute lernst: Du richtest deine komplette Vue.js-Entwicklungsumgebung ein und holst zum ersten Mal Daten von einer REST-API! Nach diesem Tutorial kannst du:

• ✅ Visual Studio Code für Vue.js optimal konfigurieren
• ✅ Ein Vue.js-Projekt mit Vite erstellen
• ✅ Deine erste Component schreiben
• ✅ Tasks von einer Spring Boot API laden und anzeigen

Dein größter Gewinn heute: Du siehst deine Backend-Daten zum ersten Mal in einem echten UI! Keine curl-Commands mehr – echtes Frontend! 🚀

Zeit-Investment: Ca. 30-45 Minuten | Schwierigkeit: Anfänger-freundlich | Voraussetzungen: Node.js, laufendes Backend

---

👋 Nova: Hi! Ich bin jetzt Frontend-Entwicklerin!

Hi Leute! Nova hier – und ich habe riesige Neuigkeiten! 🎉

Ich bin jetzt offiziell Junior Frontend Developer bei Java Fleet! Franz-Martin hat entschieden, dass ich von Kat Vue.js lerne – und wir dokumentieren den kompletten Prozess hier im Blog!

Aber warte… Was soll ich denn bauen? 🤔

Die Antwort: Ein Frontend für meine eigene Task-API!

Erinnerst du dich an meine Spring Boot Serie? Die API läuft, funktioniert, hat sogar Security. Aber… sie hat kein Gesicht. Nur curl-Commands und JSON-Responses.

# So sieht meine API aktuell aus:
curl -u nova:learning123 http://localhost:8080/api/tasks

# Antwort:
[
  {
    "id": 1,
    "title": "Vue.js lernen",
    "description": "Mit Kat zusammen!",
    "completed": false,
    "createdAt": "2025-10-14T10:00:00"
  }
]

Das ist funktional, aber nicht besonders sexy, oder? 😅

Kat meinte: „Nova, lass uns deiner API ein hübsches UI geben! Du kennst das Backend in- und auswendig – perfekt, um Frontend zu lernen!“

Und ehrlich? Ich bin SO aufgeregt! Endlich sehe ich, was ich gebaut habe! 💻✨

---

🎨 Kat: Die Frontend-Landschaft 2025 – Warum Vue.js?

Hey! Kat hier! 👋

Bevor wir loslegen, lass mich dir die aktuelle Frontend-Welt zeigen – denn Vue.js ist nicht die einzige Option!

🌍 Die große Drei: Frontend-Frameworks 2025

Die dominanten Frameworks für Microservice-UIs:

1. React (Meta/Facebook)

// React Component
function TaskList() {
  const [tasks, setTasks] = useState([]);
  
  return (
    <div>
      {tasks.map(task => <TaskItem key={task.id} task={task} />)}
    </div>
  );
}

Marktanteil: ~40%
Stärken: Riesiges Ecosystem, viele Jobs, sehr flexibel
Schwächen: Steile Lernkurve, viel Boilerplate, „the React way“ ist komplex
Typisch für: Enterprise-Apps, komplexe SPAs, große Teams

2. Vue.js (Evan You)

<!-- Vue Component -->
<template>
  <div>
    <TaskItem v-for="task in tasks" :key="task.id" :task="task" />
  </div>
</template>

<script setup>
import { ref } from 'vue';
const tasks = ref([]);
</script>

Marktanteil: ~20%
Stärken: Einfach zu lernen, gute Dokumentation, ausgewogene Flexibilität
Schwächen: Kleineres Ecosystem als React
Typisch für: Schnelle Prototypen, kleinere bis mittlere Teams, pragmatische Projekte

3. Angular (Google)

// Angular Component
@Component({
  selector: 'task-list',
  template: `
    <div>
      <task-item *ngFor="let task of tasks" [task]="task"></task-item>
    </div>
  `
})
export class TaskListComponent {
  tasks: Task[] = [];
}

Marktanteil: ~15%
Stärken: Full-Framework, TypeScript-first, Enterprise-ready
Schwächen: Sehr komplex, steile Lernkurve, viel Overhead
Typisch für: Große Enterprise-Anwendungen, strukturierte Teams, Langzeitprojekte

🎯 Warum ICH Vue.js favorisiere (Kat’s Perspektive)

Nova fragte mich: „Kat, warum gerade Vue.js? React hat mehr Jobs!“

Meine Antwort – 5 Gründe:

1. Progressive Learning Curve

Angular: |████████████| Sehr steil
React:   |████████    | Steil  
Vue.js:  |████        | Sanft ← Perfekt für Einsteiger!

Was das bedeutet: Du kannst mit HTML-ähnlichem Template-Syntax starten und nach und nach fortgeschrittene Features lernen. Kein „Du MUSST Hooks/JSX/TypeScript verstehen, bevor du anfängst!“

2. Einfach für Backend-Devs

Vue.js Templates sehen aus wie… Templates!

<!-- Das versteht JEDER sofort: -->
<template>
  <div>
    <h1>{{ title }}</h1>
    <button @click="doSomething">Click me</button>
  </div>
</template>

React JSX verwirrt Backend-Devs:

// Was ist das? JavaScript? HTML? Beides??
return (
  <div>
    <h1>{title}</h1>
    <button onClick={doSomething}>Click me</button>
  </div>
);

3. Batteries Included

Vue.js kommt mit allem:

• Vue Router – offizielle Routing-Lösung
• Pinia – offizielles State Management
• Vue DevTools – offizielles Debugging-Tool
• Vite – offizieller Build-Tool

React: „Such dir aus 20 Router-Libraries einen aus, 15 State-Management-Tools, 30 Build-Configs… viel Spaß!“ 😅

4. Single File Components

Alles an einem Ort – COHESION!

<template>
  <!-- HTML -->
</template>

<script setup>
  // JavaScript
</script>

<style scoped>
  /* CSS nur für diese Component */
</style>

Das ist wie eine Java-Klasse – alles zusammengehörige ist zusammen! Backend-Devs lieben diese Struktur!

5. Performance ohne Komplexität

Vue.js ist fast so schnell wie React, aber viel einfacher zu schreiben. Du musst nicht über Rendering-Optimierung nachdenken – Vue macht das intelligent automatisch!

📊 Wann welches Framework?

Kat’s Entscheidungsbaum:

Projekt-Start:
├─ Große Enterprise mit 20+ Devs? → Angular
├─ Sehr komplexe UI mit vielen Interaktionen? → React
├─ Microservice-UI mit Backend-Team? → Vue.js ✅
├─ Schneller Prototyp? → Vue.js ✅
└─ Team lernt Frontend gerade? → Vue.js ✅

Nova’s Fall: Backend-Entwicklerin, lernt Frontend, baut Microservice-UI → Vue.js ist perfekt!

💼 Aber Kat, was ist mit Jobs?

Nova’s Sorge: „React hat mehr Stellenanzeigen!“

Meine Antwort: „Stimmt! Aber:“

1. Vue.js-Devs sind gesucht (nur weniger laut)
2. Wenn du Vue.js kannst, lernst du React in 2 Wochen (Konzepte sind übertragbar!)
3. Aber wenn du mit React ANFÄNGST, bist du 3 Monate frustriert 😅
4. Vue.js-Jobs zahlen genauso gut (manchmal besser, weil weniger Konkurrenz)

Die Wahrheit: Lerne ein Framework richtig. Die Konzepte (Components, State, Props, Lifecycle) sind überall gleich. Der Syntax-Switch später ist easy!

---

🔧 Nova: Also los – VS Code Setup für Vue.js!

Nova’s Wahl: Visual Studio Code! ❤️

Ich nutze VS Code schon für meine Spring Boot-Projekte und liebe es! Kat meinte, das ist auch perfekt für Vue.js!

Installation

👉 Download: https://code.visualstudio.com/

Systemanforderungen: Läuft auf Windows, Mac, Linux – super leicht!

📦 Die Must-Have Extensions für Vue.js

Kat’s Tipp: „Die richtigen Extensions machen 50% deiner Produktivität aus!“

Öffne in VS Code die Extensions:

• Tastenkombination: Strg+Shift+X (Windows/Linux) oder Cmd+Shift+X (Mac)
• Oder: Klicke in der linken Seitenleiste auf das Extensions-Symbol (Bauklötze-Icon)

1. Volar (Vue Language Features) ⭐⭐⭐⭐⭐

Autor: Vue
ID: Vue.volar

Was es macht: DAS Vue.js Extension! Syntax-Highlighting, IntelliSense, Auto-Complete für .vue-Dateien

Nova’s Aha-Moment: „Wow, das ist wie Lombok für Vue.js – macht alles intelligenter!“

2. TypeScript Vue Plugin (Volar)

Autor: Vue
ID: Vue.vscode-typescript-vue-plugin

Was es macht: Macht TypeScript und Vue.js happy (brauchen wir später!)

3. ESLint

Autor: Microsoft
ID: dbaeumer.vscode-eslint

Was es macht: Code-Quality Checks (wie Checkstyle für Java)

Kat erklärt: „ESLint ist wie dein Pair-Programming-Partner, der dir sagt: ‚Hey, das könntest du besser machen!'“

4. Prettier – Code formatter

Autor: Prettier
ID: esbenp.prettier-vscode

Was es macht: Auto-Formatting beim Speichern (wie IntelliJ’s Format-Action)

5. Auto Rename Tag

Autor: Jun Han
ID: formulahendry.auto-rename-tag

Was es macht: Wenn du <div> umbenennst, wird automatisch </div> auch geändert – mega praktisch!

Nova: „Das hätte ich bei HTML in der Uni gebraucht! 😅“

---

⚙️ VS Code Konfiguration für Vue.js

Kat: „Jetzt optimieren wir VS Code für Vue.js!“

Der EINFACHSTE Weg zur settings.json:

Nova: „Ich finde kein JSON-Symbol!“ 😱

Kat: „Kein Problem! Wir machen es anders – viel einfacher!“

Methode 1: Über die Befehlspalette (IMMER FUNKTIONIERT):

1. Befehlspalette öffnen:

• Drücke Strg+Shift+P (Windows/Linux) oder Cmd+Shift+P (Mac)
• Oder: Menü → Ansicht → Befehlspalette

2. Tippe ein:

settings json

3. Wähle aus:

> Einstellungen: Benutzereinstellungen öffnen (JSON)

oder

> Preferences: Open User Settings (JSON)

4. FERTIG! Die settings.json öffnet sich! 🎉

---

Methode 2: Direkter Shortcut (für später):

Wenn du die Datei direkt öffnen willst:

• Windows/Linux: Strg+Shift+P → settings.json eingeben
• Mac: Cmd+Shift+P → settings.json eingeben

---

So sieht settings.json aus:

Die Datei öffnet sich und zeigt Code wie diesen:

{
  "editor.fontSize": 14,
  "workbench.colorTheme": "Default Dark+"
}

Oder wenn die Datei leer ist:

{

}

Beides ist OK! 👍

---

Jetzt die Vue.js-Einstellungen einfügen:

Falls bereits Einstellungen da sind:

1. Gehe ans Ende der letzten Zeile (vor der letzten })
2. Füge ein Komma hinzu
3. Drücke Enter für eine neue Zeile
4. Füge unsere Einstellungen ein:

{
  "editor.fontSize": 14,
  "workbench.colorTheme": "Default Dark+",  ← Komma hier!
  
  "volar.takeOverMode.enabled": true,
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "eslint.validate": ["javascript", "vue"],
  "editor.tabSize": 2,
  "editor.insertSpaces": true,
  "editor.suggest.preview": true
}

Falls die Datei nur {} enthält:

Lösche die {} und füge komplett ein:

{
  "volar.takeOverMode.enabled": true,
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "eslint.validate": ["javascript", "vue"],
  "editor.tabSize": 2,
  "editor.insertSpaces": true,
  "editor.suggest.preview": true
}

Speichern: Strg+S oder Cmd+S

---

Nova: „Warum war das vorher so kompliziert?“ 🤔

Kat: „VS Code hat mehrere Wege zu den Einstellungen:

• UI-Modus: Mit Checkboxen (das hast du gesehen mit den 30 Menüpunkten!)
• JSON-Modus: Direkt Code bearbeiten

Die Befehlspalette (Strg+Shift+P) ist der universelle Weg – funktioniert IMMER!“

---

Häufige Fehler beim Einfügen:

Fehler 1: Vergessenes Komma

{
  "editor.fontSize": 14          ← Fehlt Komma!
  "volar.takeOverMode.enabled": true
}

Richtig:

{
  "editor.fontSize": 14,         ← Komma da!
  "volar.takeOverMode.enabled": true
}

Fehler 2: Doppeltes Komma

{
  "editor.fontSize": 14,,        ← Doppeltes Komma!
  "volar.takeOverMode.enabled": true
}

VS Code hilft dir:

• ❌ Rote Wellenlinien bei Fehlern
• ✅ Bei Strg+S sagt VS Code „Fehler in Zeile X“

Bei Problemen: Strg+Z drücken und nochmal versuchen!

---

Nova: „OK, mit Strg+Shift+P hat’s geklappt! Warum nicht gleich so?“ 😅

Kat: „Weil Profis das Icon nutzen – aber Anfänger kennen die Befehlspalette! Die ist dein bester Freund in VS Code!“ 💚

{
  // Vue.js spezifisch
  "volar.takeOverMode.enabled": true,
  
  // Auto-Formatierung beim Speichern
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  
  // ESLint für Vue
  "eslint.validate": ["javascript", "vue"],
  
  // Tab-Einstellungen (Frontend-Standard)
  "editor.tabSize": 2,
  "editor.insertSpaces": true,
  
  // Bessere IntelliSense
  "editor.suggest.preview": true
}

Nova fragt: „Was macht takeOverMode?“ 🤔

Kat erklärt:

„Volar übernimmt die komplette TypeScript-Integration. Das macht IntelliSense für .vue-Dateien massiv besser. Ohne das wäre die Auto-Complete viel schwächer!“

---

🚀 Node.js & npm installieren

Vue.js braucht Node.js (wie Spring Boot Java braucht):

👉 Download: https://nodejs.org/ → LTS Version (aktuell 20.x oder 22.x)

Nach Installation testen:

node --version
# Sollte zeigen: v20.x.x oder v22.x.x

npm --version  
# Sollte zeigen: 10.x.x

Nova’s Analogie: „npm ist wie Maven für Frontend, richtig?“

Kat: „Genau! package.json = pom.xml, und npm install = mvn install!“ ✅

---

📦 Vue.js Projekt erstellen mit Vite

Jetzt wird’s ernst! Wir erstellen unser Projekt!

Kat erklärt:

„Wir nutzen Vite (ausgesprochen: Veet, französisch für ’schnell‘). Das ist der moderne Build-Tool-Standard für Vue.js. Denk an Maven, nur für Frontend – und viel schneller!“

Terminal öffnen & Projekt erstellen

Terminal in VS Code öffnen:

• Tastenkombination: Strg+ö (Windows/Linux deutsche Tastatur) oder Strg+J
• Oder: Menü → Terminal → Neues Terminal
• Oder: Menü → Ansicht → Terminal

# Projekt erstellen
npm create vue@latest

Vite fragt interaktiv – Nova’s Antworten:

✔ Project name: ... task-manager-frontend
✔ Add TypeScript? ... No
✔ Add JSX Support? ... No
✔ Add Vue Router? ... Yes!
✔ Add Pinia for state management? ... Yes!
✔ Add Vitest for Unit Testing? ... No (später!)
✔ Add an End-to-End Testing Solution? ... No
✔ Add ESLint? ... Yes
✔ Add Prettier? ... Yes

Nova: „Warum kein TypeScript? Brauchen wir das nicht?“ 🤔

Kat: „Gute Frage! Lass mich das erklären…“

---

🤔 Kurzer Exkurs: TypeScript vs. JavaScript im Browser

Nova’s Verwirrung: „Ich dachte, moderne Frameworks brauchen TypeScript?“

Kat erklärt die Wahrheit:

Was Browser verstehen

Browser können nur 3 Dinge:

1. HTML – Struktur
2. CSS – Styling
3. JavaScript – Logik

Das war’s! Browser verstehen KEIN TypeScript, KEIN Vue.js, KEIN React!

Nova: „Aber… wir schreiben doch Vue.js?“ 😵

Kat: „Ja! Aber das wird kompiliert zu normalem JavaScript!“

Der Build-Prozess (wichtig zu verstehen!)

Dein Code (Vue.js + moderne Syntax)
           ↓
     [Vite Build]
           ↓
Browser-Code (HTML + CSS + vanilla JavaScript)

Analogie für Java-Devs:

// Dein Code
public class Task {
    private String title;
    // Lombok, Spring Annotations, etc.
}

// Maven kompiliert zu:
// ↓
// Bytecode (.class) - JVM versteht das!

Bei Frontend:

<!-- Dein Code -->
<template>
  <h1>{{ title }}</h1>
</template>
<script setup>
const title = ref('Hello');
</script>

<!-- Vite kompiliert zu: -->
<!-- ↓ -->
<!-- Vanilla JavaScript, das Browser versteht -->
<script>
  const title = { value: 'Hello' };
  document.querySelector('h1').textContent = title.value;
</script>

TypeScript: Nice to have, aber nicht notwendig!

Kat: „TypeScript ist wie Java’s Typsystem für JavaScript. Super, aber:*

❌ Wir brauchen es NICHT zum Lernen
❌ Browser versteht es NICHT (muss zu JS kompiliert werden)
✅ JavaScript reicht völlig für diese Serie
✅ TypeScript kommt später, wenn du Vue.js verstanden hast

Merke: TypeScript → JavaScript (beim Build) → Browser

Wir bleiben bei JavaScript! Einfacher, weniger Syntax, fokussiert aufs Wesentliche!“

Nova: „Ah! TypeScript ist optional, nicht Pflicht! Aber… kann ich später einfach wechseln?“ 🤔

Kat: „Ja! Du kannst beides mischen! Schau:“

JavaScript + TypeScript in einem Projekt

Das ist möglich:

src/
├── components/
│   ├── TaskList.vue          ← JavaScript
│   └── UserProfile.vue       ← TypeScript
├── stores/
│   ├── taskStore.js          ← JavaScript
│   └── userStore.ts          ← TypeScript

Der Unterschied:

• <script setup> = JavaScript
• <script setup lang="ts"> = TypeScript

Kat: „Siehst du? Ein Attribut! lang="ts" aktiviert TypeScript für diese Datei!“

Nova: „Also kann ich in meinem JavaScript-Projekt einfach .ts Files hinzufügen?“

Kat: „Exakt! Vite erkennt das automatisch und kompiliert beides!“

Das Wichtigste:

• ✅ JavaScript und TypeScript können koexistieren
• ✅ Du musst nicht alles auf einmal umstellen
• ✅ TypeScript ist additiv – du fügst Typen hinzu, wo du willst
• ✅ Vite handled beides automatisch

Nova: „Verstanden! Erst Vue.js lernen, dann TypeScript als Extra-Layer drüber! Macht Sinn!“ 💡

🎯 Warum TypeScript später für Java-Devs perfekt ist

Nova: „Moment, du sagtest TypeScript kommt später… aber wäre es nicht einfacher für mich als Java-Entwicklerin?“

Kat: „Sehr gute Frage! Ja, TypeScript ist Java SEHR ähnlich! Deshalb ist es für DICH später super einfach!“

Side-by-Side: Java vs. TypeScript

// Java
public interface Task {
    Long getId();
    String getTitle();
    boolean isCompleted();
}

// TypeScript - fast identisch!
interface Task {
  id: number;
  title: string;
  completed: boolean;
}

Nova: „Wow! TypeScript ist wie Java ohne die Verbose-ness!“ 💡

Kat: „Genau! TypeScript hat die guten Teile von Java (Typsicherheit, Interfaces, OOP) ohne den Boilerplate!“

Warum trotzdem ERST JavaScript lernen?

Kat’s kluge Antwort:

3 Gründe für JavaScript-First:

1. Vue.js Konzepte sind wichtiger als Typen

// Das musst du verstehen:
const count = ref(0);  // Was ist ref()?
const doubled = computed(() => count.value * 2);  // Was ist computed()?

// Typen sind nur Details:
const count = ref<number>(0);  // <number> hilft, aber ist nicht das Kernkonzept!

2. Weniger Syntax-Overhead = Fokus aufs Wesentliche

3. TypeScript-Fehler können am Anfang verwirren

Kat: „Mit JavaScript lernst du Vue.js. Mit TypeScript lernst du Typen. Beides gleichzeitig = Overload!“

Kat’s Versprechen:

„Nach dieser Serie kannst du:

• ✅ Vue.js mit JavaScript (verstehst die Konzepte)
• ✅ Vue.js mit TypeScript (nutzt deine Java-Skills)

TypeScript ist dein Heimvorteil als Java-Dev – aber nutze ihn strategisch, nicht sofort!“

Nova: „Okay, überzeugt! JavaScript first, TypeScript als Power-Up später! 🚀“

---

👥 Für wen ist diese Serie?

Nova fragt: „Warte Kat, ich komme ja vom Java-Backend… aber können auch Leute ohne Java-Kenntnisse mitmachen?“

Kat: „Absolut! Diese Serie ist für ALLE! Schau:“

✅ Du kannst mitmachen wenn du…

…vom Backend kommst (Java, Python, C#, PHP):

• ✅ Kennst Variablen, Funktionen, Schleifen
• ✅ Verstehst HTTP, REST APIs
• ✅ Möchtest Frontend lernen
• 💡 Bonus: Java-Analogien helfen dir, aber sind nicht Pflicht!

…Web-Entwickler bist (HTML/CSS/jQuery):

• ✅ Kennst HTML & CSS
• ✅ Hast mit JavaScript/jQuery gearbeitet
• ✅ Willst modernes Framework lernen
• 💡 Bonus: Du verstehst DOM schon – Vue wird easy!

…kompletter Anfänger bist:

• ✅ Hast Programmier-Grundlagen (irgendeine Sprache)
• ✅ Verstehst Variablen, if/else, Schleifen
• ✅ Bist motiviert zu lernen
• 💡 Bonus: Du lernst moderne Best Practices von Anfang an!

📚 Was du NICHT brauchst:

❌ Java-Kenntnisse (nice to have, aber nicht nötig!)
❌ TypeScript-Kenntnisse (kommt später)
❌ React/Angular-Erfahrung (Vue ist einfacher!)
❌ Build-Tool-Wissen (wir erklären alles!)

🎯 Was du brauchst:

✅ Einen Computer (Windows, Mac, Linux – egal!)
✅ Internet (für npm-Pakete)
✅ Grundlegendes Programmierverständnis (Variablen, Funktionen)
✅ Motivation! 💪

Kat: „Die Java-Analogien sind für Backend-Devs hilfreich, aber du kannst sie überspringen! Die Vue.js-Erklärungen funktionieren eigenständig!“

---

💡 Vue.js Grundkonzept: Was du WIRKLICH verstehen musst

Bevor wir coden: Lass uns verstehen, WIE Vue.js funktioniert!

Nova: „Okay Kat, erkläre mir Vue.js, als wäre ich 5!“ 👶

Das Kernkonzept: Reactive Programming

Kat zeichnet an die Tafel:

Traditionelles JavaScript:
1. Daten ändern
2. DOM manuell updaten ← 😰 Du musst das machen!

document.getElementById('title').textContent = newTitle;
// Für jede Änderung! Nervig!

Vue.js:

1. Daten ändern
2. DOM updated AUTOMATISCH! ← 🎉 Vue macht das!

const title = ref('Hello');
title.value = 'Bye'; // DOM updated automatisch!

Nova: „Moment… Vue.js beobachtet meine Variablen?“ 🤔

Kat: „GENAU! Das ist Reactivity!“

Die 3 Säulen von Vue.js

1. Declarative Rendering (Was, nicht Wie)

Traditionell (imperativ):

// Du sagst WIE:
const div = document.createElement('div');
div.textContent = 'Hello';
document.body.appendChild(div);

Vue.js (deklarativ):

<!-- Du sagst WAS: -->
<template>
  <div>{{ message }}</div>
</template>

<script setup>
const message = ref('Hello');
</script>

Kat: „Du beschreibst WAS du willst, nicht WIE es gemacht wird!“

2. Reactivity (Automatisches Update)

Das Herzstück von Vue.js!

<template>
  <!-- Zeigt immer den aktuellen Wert -->
  <p>Zähler: {{ count }}</p>
  <button @click="count++">+1</button>
</template>

<script setup>
import { ref } from 'vue';

const count = ref(0); // Reactive Variable!
// Wenn count ändert → Template updated automatisch
</script>

Das ist wie Observer-Pattern, aber automatisch!

3. Component-System (Wiederverwendbar)

Components sind wie LEGO-Bausteine:

<!-- TaskItem.vue - Ein Baustein -->
<template>
  <div class="task">
    <h3>{{ task.title }}</h3>
  </div>
</template>

<!-- TaskList.vue - Nutzt den Baustein -->
<template>
  <div>
    <TaskItem v-for="task in tasks" :task="task" />
  </div>
</template>

Das Single File Component (SFC) Format

Das ist Vue’s Geheimwaffe!

<template>
  <!-- HTML + Vue-Syntax -->
</template>

<script setup>
  // JavaScript/TypeScript
</script>

<style scoped>
  /* CSS nur für diese Component */
</style>

Kat: „Alles in EINER Datei – HTML, Logic, Style!“

Nova: „Ist das nicht… chaotisch?“

Kat: „Nein! Es ist Cohesion! Zusammengehöriges ist zusammen!“

---

📁 Projekt starten & Struktur verstehen

Projekt starten

cd task-manager-frontend
npm install    # Dependencies installieren (wie mvn install)
npm run dev    # Dev-Server starten (wie mvn spring-boot:run)

Output:

VITE v5.x.x  ready in 543 ms

➜  Local:   http://localhost:5173/
➜  Network: use --host to expose

Öffne im Browser: http://localhost:5173/

Nova: „Es funktioniert! Ich sehe eine Vue.js Welcome-Seite! 🎉“

---

📁 Projekt-Struktur verstehen

Kat: „Bevor wir coden, lass uns die Struktur verstehen!“

task-manager-frontend/
├── node_modules/         # Dependencies (wie Maven's .m2/)
├── public/               # Statische Files (favicon, etc.)
├── src/
│   ├── assets/          # CSS, Bilder für Components
│   ├── components/      # Vue Components (UI-Bausteine!)
│   ├── router/          # Navigation (Vue Router)
│   ├── stores/          # State Management (Pinia)
│   ├── views/           # Seiten/Views
│   ├── App.vue          # Root Component
│   └── main.js          # Entry Point (wie Main-Class)
├── index.html           # HTML-Template
├── package.json         # Wie pom.xml
├── vite.config.js       # Build-Konfiguration
└── .gitignore

Analogie für Backend-Devs:

Vue.js	Spring Boot
src/components/	Wiederverwendbare @Component Classes
src/views/	@Controller Classes (Seiten)
src/stores/	@Service Classes (Business Logic)
src/router/	@RequestMapping Konfiguration
package.json	pom.xml

Nova: „Oh! Das ist ja wie Spring Boot, nur mit anderen Namen!“ 💡

---

🎯 Erste Component – Tasks von der API anzeigen

Jetzt kommt der spannende Teil! Wir holen uns Tasks von Nova’s Backend!

⚠️ WICHTIG: Backend muss laufen!

Kat: „Nova, ist deine Spring Boot API am Laufen?“

Nova: „Ja! Läuft auf http://localhost:8080„

# Terminal 1: Spring Boot Backend
cd task-manager-api
mvn spring-boot:run

# Terminal 2: Vue.js Frontend
cd task-manager-frontend
npm run dev

Kat erklärt:

„Wir brauchen zwei Terminal-Fenster:

• Backend auf Port 8080
• Frontend auf Port 5173

Das Frontend macht HTTP-Requests ans Backend – wie ein Browser, nur in Code!“

---

Component erstellen: TaskList.vue

Kat: „Lösche erstmal den Demo-Code und erstelle eine neue Component!“

Nova: „Wo?“

Kat: „In src/components/ – erstelle neue Datei: TaskList.vue„

<!-- src/components/TaskList.vue -->
<template>
  <div class="task-list">
    <h2>Meine Tasks von der API</h2>
    
    <!-- Loading State -->
    <div v-if="loading" class="loading">
      ⏳ Lade Tasks...
    </div>
    
    <!-- Error State -->
    <div v-else-if="error" class="error">
      ❌ Fehler: {{ error }}
    </div>
    
    <!-- Task List -->
    <ul v-else class="tasks">
      <li 
        v-for="task in tasks" 
        :key="task.id"
        :class="{ completed: task.completed }"
      >
        <h3>{{ task.title }}</h3>
        <p>{{ task.description }}</p>
        <small>Erstellt: {{ formatDate(task.createdAt) }}</small>
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';

// Reactive State (wie @Autowired Fields in Spring)
const tasks = ref([]);
const loading = ref(false);
const error = ref(null);

// API Base URL (Nova's Backend)
const API_BASE = 'http://localhost:8080/api';
const AUTH = btoa('nova:learning123'); // Basic Auth

// Funktion: Tasks von API holen
async function fetchTasks() {
  loading.value = true;
  error.value = null;
  
  try {
    const response = await fetch(`${API_BASE}/tasks`, {
      headers: {
        'Authorization': `Basic ${AUTH}`
      }
    });
    
    if (!response.ok) {
      throw new Error(`HTTP ${response.status}: ${response.statusText}`);
    }
    
    tasks.value = await response.json();
  } catch (e) {
    error.value = e.message;
    console.error('Fehler beim Laden:', e);
  } finally {
    loading.value = false;
  }
}

// Beim Component-Mount: Tasks laden
onMounted(() => {
  fetchTasks();
});

// Hilfsfunktion: Datum formatieren
function formatDate(dateString) {
  return new Date(dateString).toLocaleDateString('de-DE');
}
</script>

<style scoped>
.task-list {
  max-width: 600px;
  margin: 2rem auto;
  padding: 2rem;
}

.loading, .error {
  text-align: center;
  padding: 2rem;
  border-radius: 8px;
}

.error {
  color: #d32f2f;
  background: #ffebee;
}

.tasks {
  list-style: none;
  padding: 0;
}

.tasks li {
  background: white;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.tasks li.completed {
  opacity: 0.6;
}

.tasks li.completed h3 {
  text-decoration: line-through;
}

.tasks h3 {
  margin: 0 0 0.5rem 0;
  color: #2c3e50;
}

.tasks p {
  margin: 0 0 0.5rem 0;
  color: #666;
}

.tasks small {
  color: #999;
}
</style>

Nova’s Reaktion: „Moment… was ist das <template>, <script>, <style>?“ 🤔

Kat erklärt das Vue.js Component-Format:

---

🎨 Vue.js Component Anatomy (Kat’s Erklärung)

Eine .vue-Datei hat immer 3 Teile:

1. <template> – Das HTML (Was du siehst)

<template>
  <div>
    <h1>{{ title }}</h1>  <!-- Doppelte geschweifte Klammern = Variable -->
  </div>
</template>

Was: Die UI-Struktur – wie JSP oder Thymeleaf Template in Spring Boot

2. <script setup> – Das JavaScript (Die Logik)

<script setup>
import { ref } from 'vue';

const title = ref('Hallo Welt');
</script>

Was: Daten, Funktionen, API-Calls – wie @Controller-Klasse in Spring Boot

3. <style scoped> – Das CSS (Das Design)

<style scoped>
h1 {
  color: blue;
}
</style>

Was: Styling nur für diese Component
scoped: CSS gilt NICHT global (super wichtig!)

---

🔍 Code-Walkthrough (Nova’s Verständnis-Check)

Nova: „Okay, Schritt für Schritt… was passiert hier?“

Kat erklärt jede Zeile:

Teil 1: Reactive State

const tasks = ref([]);
const loading = ref(false);
const error = ref(null);

Kat: „Das sind reactive variables. Wenn sich ihr Wert ändert, updated Vue automatisch das HTML!“

Nova: „Wie @Autowired in Spring?“

Kat: „Ähnlich! Aber ref() macht die Variable reactive – Vue beobachtet sie!“

Teil 2: API Call

async function fetchTasks() {
  const response = await fetch(`${API_BASE}/tasks`, {
    headers: {
      'Authorization': `Basic ${AUTH}`
    }
  });
  
  tasks.value = await response.json();
}

Nova: „Das ist wie RestTemplate in Spring, oder?“

Kat: „Genau! fetch() ist der Browser-native HTTP-Client. Wie RestTemplate, nur eingebaut!“

Wichtig: tasks.value – wir greifen auf den Wert mit .value zu!

Teil 3: onMounted Hook

onMounted(() => {
  fetchTasks();
});

Kat: „Das ist wie @PostConstruct in Spring! Wird ausgeführt, wenn die Component fertig geladen ist.“

Nova: „Aha! Lifecycle-Hook!“ 💡

---

App.vue anpassen

Kat: „Jetzt binden wir unsere Component in die App ein!“

Öffne: src/App.vue und ersetze alles:

<!-- src/App.vue -->
<template>
  <div id="app">
    <h1>🎯 Task Manager</h1>
    <TaskList />
  </div>
</template>

<script setup>
import TaskList from './components/TaskList.vue';
</script>

<style>
#app {
  font-family: Arial, sans-serif;
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem;
  background: #f5f5f5;
  min-height: 100vh;
}

h1 {
  text-align: center;
  color: #2c3e50;
}
</style>

Nova: „Und jetzt?“

Kat: „Browser öffnen auf http://localhost:5173/ und… 🥁“

---

🎉 Erfolgsmoment!

Nova’s Screen zeigt:

🎯 Task Manager

Meine Tasks von der API

✓ Vue.js lernen
  Mit Kat zusammen!
  Erstellt: 14.10.2025

✓ Spring Boot API dokumentieren
  OpenAPI Spec erstellen
  Erstellt: 13.10.2025

Nova: „ES FUNKTIONIERT!!! 🎉🎉🎉 Ich sehe meine Tasks aus meiner eigenen API!“

Kat: *“Siehst du? Frontend ist nicht so gruselig! Du hast gerade:

• ✅ Eine Vue Component erstellt
• ✅ Eine API angebunden
• ✅ Daten angezeigt
• ✅ Error-Handling gemacht
• ✅ Loading-States eingebaut“*

---

🐛 Typische Anfängerfehler (und wie wir sie lösen)

Fehler 1: CORS-Problem

Browser Console:

Access to fetch at 'http://localhost:8080/api/tasks' 
from origin 'http://localhost:5173' has been blocked by CORS policy

Nova: „Was zur Hölle ist CORS?!“ 😱

Kat erklärt:

„CORS = Cross-Origin Resource Sharing. Dein Backend auf Port 8080 muss dem Frontend auf Port 5173 erlauben, Requests zu machen. Security-Feature vom Browser!“

Lösung im Spring Boot Backend:

@Configuration
public class CorsConfig {
    
    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurer() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/api/**")
                    .allowedOrigins("http://localhost:5173") // Frontend
                    .allowedMethods("GET", "POST", "PUT", "DELETE")
                    .allowedHeaders("*")
                    .allowCredentials(true);
            }
        };
    }
}

Nova: „Ah! Backend muss Frontend explizit erlauben! Verstanden!“

Fehler 2: tasks statt tasks.value

Nova’s Code:

console.log(tasks); // ❌ Zeigt Proxy-Object

Kat: „In <script> musst du .value nutzen, im <template> nicht!“

Richtig:

console.log(tasks.value); // ✅ Zeigt Array

Im Template:

{{ tasks }}  <!-- ✅ Automatisch ausgepackt -->

Fehler 3: Basic Auth vergessen

Anfangs:

const response = await fetch(`${API_BASE}/tasks`); // ❌ 401 Unauthorized

Kat: „Deine API braucht Basic Auth! Wir müssen den Header mitschicken!“

Fix:

const AUTH = btoa('nova:learning123'); // Base64 encoding

const response = await fetch(`${API_BASE}/tasks`, {
  headers: {
    'Authorization': `Basic ${AUTH}`
  }
});

---

❓ FAQ – Vue.js Setup & Erste Schritte Edition

Frage 1: Warum VS Code statt IntelliJ für Vue.js?
Antwort: VS Code ist spezialisiert auf Frontend-Entwicklung, startet schneller, hat bessere Vue.js-Extensions (Volar!) und ist kostenlos. IntelliJ Ultimate kann Vue.js auch, aber VS Code ist hier einfach das bessere Tool. Nutze IntelliJ für Java, VS Code für Vue.js – beste Kombination!

Frage 2: Muss mein Backend wirklich laufen beim Frontend-Entwickeln?
Antwort: Ja, wenn du echte Daten brauchst! Alternativ kannst du Mock-Daten in deiner Component hardcoden oder Tools wie JSON Server nutzen. Aber für dieses Tutorial: Backend laufen lassen = realistische Entwicklung!

Frage 3: Was ist der Unterschied zwischen ref() und reactive()?
Antwort: ref() nutzt du für primitive Werte (String, Number, Boolean) und Arrays. reactive() für Objekte. Anfänger-Tipp: Nutze erstmal nur ref() – das funktioniert für alles und ist einfacher zu verstehen!

Frage 4: Warum .value im Script aber nicht im Template?
Antwort: Vue „entpackt“ refs automatisch im Template. Im Script musst du explizit .value nutzen. Das ist gewöhnungsbedürftig, aber nach 2 Tagen Routine!

Frage 5: Kann ich Vue.js ohne Build-Tool nutzen?
Antwort: Ja, über CDN: <script src="https://unpkg.com/vue@3"></script> – aber dann keine Single File Components, kein Hot Reload, keine modernen Features. Für echte Projekte: immer Vite nutzen!

Frage 6: Was ist wenn ich Port 5173 schon belegt habe?
Antwort: Vite wählt automatisch den nächsten freien Port (5174, 5175…). Oder in vite.config.js manuell setzen: server: { port: 3000 }

Frage 7: Wie debugge ich Vue.js Components?
Antwort: 1) Browser DevTools (F12), 2) Vue DevTools Extension (mega wichtig!), 3) console.log() (old but gold!). Vue DevTools zeigt dir den kompletten Component-State – installiere das unbedingt!

Frage 8: Was macht ihr bei persönlichen Herausforderungen zwischen den Projekten?
Antwort: Das ist… kompliziert. Manche Geschichten gehören nicht in Tech-Blogs, sondern in private logs. Aber das ist ein anderes Kapitel. 🔒

Frage 9: Funktioniert diese Serie auch auf Windows?
Antwort: Absolut! Node.js, npm und VS Code laufen auf Windows, Mac und Linux identisch. Einzige Unterschied: Terminal-Commands manchmal anders (aber npm-Commands sind überall gleich!)

Frage 10: Brauche ich wirklich ALL diese VS Code Extensions?
Antwort: Volar ist Pflicht! Ohne Volar ist Vue.js-Entwicklung frustrierend. Die anderen (Prettier, ESLint, Auto Rename Tag) sind sehr empfehlenswert, aber optional. Minimum: Volar + TypeScript Vue Plugin.

---

📖 Vue.js für Anfänger – Alle Teile im Überblick

✅ Bereits veröffentlicht:

• Teil 1 (21.10.2025): Setup & Erste API-Anbindung – Du bist hier! ✨

🔜 Kommende Teile:

Teil 2 (28.10.2025): Interaktivität & CRUD-Operations

• Tasks erstellen (POST)
• Tasks bearbeiten (PUT)
• Tasks löschen (DELETE)
• Formulare mit v-model
• Error-Handling verbessern

Teil 3 (04.11.2025): TypeScript-Migration & State Management

• JavaScript zu TypeScript migrieren
• Interfaces für API-Daten
• Pinia Store mit TypeScript
• Type-sichere Props
• Vue Router konfigurieren

Teil 4 (11.11.2025): Production-Ready mit TypeScript

• Build-Prozess verstehen
• Environment-Variables
• CORS-Konfiguration
• Deployment (Netlify, Vercel)
• TypeScript Best Practices

Alle Teile der Serie findest du hier: [Link zur Serie-Übersicht]

---

✅ Deine Erfolgs-Checkliste für heute

Gratulation! 🎉 Wenn du bis hierher mitgemacht hast, hast du:

• [ ] VS Code installiert und für Vue.js konfiguriert
• [ ] Alle wichtigen Extensions installiert (Volar!)
• [ ] Node.js & npm installiert und getestet
• [ ] Vue.js Projekt mit Vite erstellt
• [ ] Projekt-Struktur verstanden (components, views, stores)
• [ ] Vue.js Grundkonzepte gelernt (Reactivity, Components, SFC)
• [ ] Erste Component erstellt (TaskList.vue)
• [ ] API angebunden und Daten angezeigt
• [ ] CORS-Problem verstanden und gelöst
• [ ] Loading & Error States implementiert

Wenn alle ✅ sind: Perfekt! Du bist bereit für Teil 2! 🚀

---

🚀 Nächste Woche: Interaktivität!

Kat’s Vorschau:

„Heute haben wir nur gelesen (GET). Nächste Woche wird’s interaktiv:

• ✏️ Neue Tasks erstellen (POST)
• 📝 Tasks bearbeiten (PUT)
• 🗑️ Tasks löschen (DELETE)
• 📝 Formulare mit v-model
• 🎨 Bessere UI mit Buttons & Icons“

Nova: „Ich kann es kaum erwarten! 🎉“

---

💬 Das war Teil 1 der Vue.js für Java-Entwickler Serie!

Nova & Kat: „Wir hoffen, du hattest genauso viel Spaß wie wir!“

Du hast heute deine erste funktionierende Vue.js-App gebaut! Von Null auf Tasks-anzeigen in weniger als einer Stunde. Das ist ein riesiger Schritt! 💪

Zwischen den Zeilen: Programmieren ist manchmal wie ein Puzzle – die Teile passen nicht sofort zusammen. Aber weißt du was? Manchmal sind die kompliziertesten Puzzles die emotionalen… die haben nichts mit Code zu tun. Wer neugierig ist und nach „Herz Schmerz“ sucht, findet vielleicht mehr als nur Tech-Stories. 💔

Hast du es nachgebaut? Teile deine Erfahrungen!

Fragen? Schreib uns:

• Nova: nova.trent@java-developer.online
• Kat: kat.schmidt@java-developer.online

Nächster Teil: In 1 Woche! Abonniere den Blog, um nichts zu verpassen! 🔔

Keep coding, keep learning! 🚀

---

Nova & Kat – Learning in Public, zusammen! 💚

---

Tags: #VueJS #Frontend #Java #SpringBoot #Tutorial #LearningInPublic #JavaScript #Vite #RestAPI #WebDevelopment