Erste Vue.js 3 Webanwendung mit Vite in 7 Schritten erstellen (Anfaenger-Guide 2026)

Vue.js 3 ist 2026 die zweitbeliebteste Webframework-Wahl in Deutschland nach React. Mit Vite als Build-Tool, TypeScript fuer Typsicherheit und Tailwind CSS fuer Design haben Sie einen modernen Stack, der von Berlin bis Muenchen in Startups und Mittelstaendlern produktiv eingesetzt wird. Dieser Guide fuehrt Sie Schritt fuer Schritt durch Ihr erstes Projekt.

Schritt 1: Node.js und pnpm installieren

Laden Sie Node.js 20 LTS herunter und installieren Sie es. Pruefen Sie die Installation mit node --version (sollte v20.x oder hoeher anzeigen). Installieren Sie dann pnpm, das wir statt npm verwenden, weil es schneller ist und weniger Speicher braucht:

npm install -g pnpm@latest pnpm --version

Schritt 2: Neues Vue 3 + Vite Projekt mit TypeScript erstellen

Im Terminal wechseln Sie in Ihr Entwicklungs-Verzeichnis und fuehren aus:

pnpm create vite@latest meine-erste-app -- --template vue-ts cd meine-erste-app pnpm install pnpm dev

Im Browser oeffnen Sie http://localhost:5173. Sie sehen die Vite + Vue Standardseite. Glueckwunsch - Ihre erste Vue 3 App laeuft.

Schritt 3: Tailwind CSS einrichten

Tailwind CSS ermoeglicht modernes Design ohne CSS-Dateien zu schreiben:

pnpm add -D tailwindcss@latest @tailwindcss/vite

# Vite-Konfig anpassen
# vite.config.ts:
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import tailwindcss from '@tailwindcss/vite';

export default defineConfig({
  plugins: [vue(), tailwindcss()],
});

In src/style.css ergaenzen Sie:

@import "tailwindcss";

Jetzt koennen Sie Tailwind-Klassen direkt in Ihren Vue-Komponenten verwenden.

Schritt 4: Erste Komponente und Routing aufbauen

Loeschen Sie den Inhalt von src/App.vue und ersetzen Sie ihn:

<script setup lang="ts">
import { ref } from 'vue';

const begruessung = ref('Hallo Berlin!');
const klick = () => { begruessung.value = 'Hallo Welt!'; };
</script>

<template>
  <div class="min-h-screen bg-slate-900 text-white p-12">
    <h1 class="text-4xl font-bold">{{ begruessung }}</h1>
    <button @click="klick" class="mt-6 bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded">
      Klick mich
    </button>
  </div>
</template>

Speichern. Vite reloadet automatisch. Klicken Sie den Button - die Begruessung aendert sich.

Schritt 5: Pinia fuer State Management hinzufuegen

Pinia ist der offizielle State-Manager fuer Vue 3. Installation:

pnpm add pinia

In src/main.ts:

import { createApp } from 'vue';
import { createPinia } from 'pinia';
import App from './App.vue';
import './style.css';

createApp(App).use(createPinia()).mount('#app');

Erstellen Sie src/stores/zaehler.ts:

import { defineStore } from 'pinia';
import { ref } from 'vue';

export const useZaehlerStore = defineStore('zaehler', () => {
  const wert = ref(0);
  const erhoehen = () => wert.value++;
  return { wert, erhoehen };
});

“Anfaenger ueberspringen oft Pinia und packen alles in App.vue. Das funktioniert fuer ein Tutorial-Projekt, aber sobald Sie zwei Komponenten brauchen, die denselben Zustand teilen, hassen Sie sich selbst. Pinia von Anfang an einfuehren spart spaeter Wochen.” — Anna Schmidt, Programmier-Anfang

Schritt 6: Vitest fuer Unit Tests konfigurieren

Tests sind nicht optional - auch nicht beim ersten Projekt:

pnpm add -D vitest @vue/test-utils jsdom

In vite.config.ts ergaenzen:

test: { environment: 'jsdom', globals: true }

Erstellen Sie src/stores/zaehler.test.ts:

import { setActivePinia, createPinia } from 'pinia';
import { useZaehlerStore } from './zaehler';
import { describe, it, expect, beforeEach } from 'vitest';

describe('Zaehler Store', () => {
  beforeEach(() => setActivePinia(createPinia()));
  it('startet bei 0', () => {
    expect(useZaehlerStore().wert).toBe(0);
  });
  it('erhoeht den Wert', () => {
    const store = useZaehlerStore();
    store.erhoehen();
    expect(store.wert).toBe(1);
  });
});

Mit pnpm vitest laufen die Tests. Beide sollten gruen sein.

Schritt 7: Auf Vercel deployen

Pushen Sie das Projekt zu GitHub. Auf vercel.com erstellen Sie einen Account, klicken “Add New Project”, waehlen Ihr GitHub-Repository. Vercel erkennt Vite automatisch. In den Projekt-Einstellungen waehlen Sie Frankfurt (fra1) als Region fuer DSGVO-Konformitaet. Klicken Sie “Deploy”. In 90 Sekunden ist Ihre App online.

Naechste Schritte

Mit dieser Basis koennen Sie:

1. Eine REST-API mit FastAPI bauen und einbinden (siehe unser FastAPI Guide).
2. Authentifizierung mit Supabase oder Clerk hinzufuegen.
3. Einen Discord-Bot in Python parallel bauen (Tutorial hier).
4. Sich fuer KI-Entwickler-Rollen in Berliner Startups qualifizieren.

FAQ

Warum Vue.js 3 und nicht React in 2026?

Flachere Lernkurve, native TypeScript-Unterstuetzung, konsistentes Tooling. Im Berliner Markt sind Vue-Entwickler weniger umkaempft als React-Entwickler.

Brauche ich Composition API oder Options API?

Composition API mit script setup ist 2026 Standard. Direkt damit anfangen.

Was kostet Vercel-Bereitstellung?

Hobby-Plan kostenlos. Pro-Plan 20 USD/Monat ab kommerziellen Webseiten oder ueber 100 GB Bandbreite.

Welche IDE ist ideal?

VS Code mit Volar, TypeScript Vue Plugin, Tailwind IntelliSense, ESLint. Cursor und Windsurf als KI-erweiterte Alternativen.