Teil 1 – Vue 3 Entwicklungsumgebung mit Vite und Pinia – in wenigen Minuten eingerichtet

In dieser Artikelserie zeigen wir Ihnen Schritt für Schritt, wie Sie mit Vue 3, Vite, TypeScript und Pinia ein modernes Frontend für dynamische Inhalte aufbauen.
Unser Ziel ist es, eine eigenständige Webinar-Plattform zu entwickeln, bei der WordPress als Backend dient. Dort definieren wir eigene Custom Post Types für Webinar-Landingpages, verwalten Inhalte zentral im CMS und stellen über eine REST-API alle Daten bereit.

Auf einer separaten Subdomain wird anschließend das eigentliche Frontend mit Vue umgesetzt, auf dem alle Webinare mit eigenen Seiten angezeigt werden.
Da der Fokus dieser Serie auf der Einarbeitung in Vue 3 liegt, überspringen wir an dieser Stelle die Einrichtung in WordPress und setzen voraus, dass Sie bereits wissen, wie man eigene Post Types registriert und eine benutzerdefinierte API-Route bereitstellt.

Voraussetzungen prüfen

Bevor wir mit der Einrichtung des Projekts beginnen, sollten wir sicherstellen, dass unsere lokale Entwicklungsumgebung aktuell ist.
Für dieses Tutorial gehen wir vom Stand November 2025 aus. Zu diesem Zeitpunkt ist die aktuelle LTS-Version von Node.js die Version 24.11.0.

Vue 3 und Vite funktionieren grundsätzlich auch mit älteren Node-Versionen, dennoch empfiehlt es sich, mindestens Node 18 oder höher zu verwenden, um volle Kompatibilität und Performance zu gewährleisten.

Überprüfen Sie Ihre installierte Node-Version im Terminal mit folgendem Befehl:

node -v
npm -v

Wenn Ihre Version älter als 18 ist, sollten Sie Node.js aktualisieren – entweder über den offiziellen Installer oder mit einem Node-Version-Manager wie nvm.

Damit stellen Sie sicher, dass alle Abhängigkeiten reibungslos funktionieren und moderne ES-Module korrekt unterstützt werden.

Neues Vite/Vue-Projekt erstellen

Bevor wir unser Vue-Frontend aufbauen, werfen wir kurz einen Blick auf Vite – das moderne Build-Tool, das die Entwicklung mit Vue (und vielen anderen Frameworks) deutlich beschleunigt.

Vite (ausgesprochen wie „veet“) wurde vom Vue-Erfinder Evan You entwickelt und ist der offizielle Nachfolger des klassischen Vue CLI. Im Gegensatz zu älteren Bundlern wie Webpack nutzt Vite eine Kombination aus ES-Modulen, nativer Browser-Unterstützung und blitzschnellem Hot Module Replacement (HMR).
Dadurch startet der Entwicklungsserver in Sekunden, Änderungen im Code werden sofort im Browser aktualisiert, und auch der Build-Prozess für die Produktion ist wesentlich schneller und schlanker.

Nachdem Sie die richtige Node- und npm-Version installiert haben und den Befehl

npm create vite@latest webinar-spa

ausführen, führt Sie das Vite-Setup schrittweise durch die Erstellung des Projekts. Sie bekommen dabei ein paar Fragen im Terminal gestellt, die Sie einfach beantworten können.

Typischer Ablauf (Stand: November 2025):

Framework auszuwählen

Im ersten Schritt werden Sie aufgefordert, ein Framework auszuwählen. Auf dem Bildschirm erscheint eine Liste wie diese:

Da wir in dieser Serie mit Vue 3 arbeiten möchten, wählen Sie bitte Vue aus.
Bestätigen Sie Ihre Auswahl mit der Eingabetaste (Enter).

gewünschten Variante

Nachdem Sie das Framework Vue ausgewählt haben, fragt der Assistent im nächsten Schritt nach der gewünschten Variante:

Hier können Sie entscheiden, ob Ihr Projekt mit TypeScript oder klassischem JavaScript erstellt werden soll.

Da wir in dieser Serie mit TypeScript arbeiten, wählen wir die Option TypeScript aus.
TypeScript bietet eine typsichere Entwicklung, erleichtert die Wartung größerer Projekte und verbessert die Unterstützung durch moderne IDEs wie VS Code oder PhpStorm.

💡 Tipp: Wenn Sie bisher noch keine Erfahrung mit TypeScript haben, können Sie alternativ auch JavaScript wählen. Der Ablauf bleibt fast identisch – Sie verzichten lediglich auf die Typisierung, was für Einsteiger oft einen leichteren Einstieg bietet.

Die beiden weiteren Optionen „Official Vue Starter “ und „Nuxt “ sind alternative Starter-Projekte, die von der Vue-Community bereitgestellt werden:

• Official Vue Starter
  Erstellt ein offizielles Beispielprojekt direkt vom Vue-Team. Es ist ideal, wenn Sie die aktuelle empfohlene Projektstruktur oder Best Practices von Vue selbst ausprobieren möchten.
• Nuxt
  Startet ein Projekt mit Nuxt, dem leistungsstarken Meta-Framework für Vue, das serverseitiges Rendering (SSR), Routing, SEO-Optimierung und viele Komfortfunktionen automatisch integriert.

Für unser Tutorial bleibt der Fokus jedoch auf einem klassischen Vue-3-Projekt mit TypeScript, daher wählen wir hier TypeScript und nicht die erweiterten Starter-Optionen.

Use rolldown-vite (Experimental)?

Bei der Projekterstellung fragt Vite unter Umständen, ob Sie den neuen rolldown-vite-Bundler verwenden möchten.

Rolldown ist ein neuer, experimenteller JavaScript-Bundler, der vom Vite-Team entwickelt wird. Langfristig soll er den bisherigen Rollup-Bundler ersetzen und noch schnellere Build-Zeiten sowie eine bessere Integration in moderne Toolchains ermöglichen.

Allerdings befindet sich Rolldown (Stand: Ende 2025) noch in der Beta-Phase. Viele Projekte laufen bereits stabil, aber bei komplexeren Libraries wie Pinia, Vue Router oder Tailwind CSS können aktuell noch unerwartete Build-Fehler oder Inkompatibilitäten auftreten.

👉 Empfohlene Auswahl: Wählen Sie hier „No“, um zunächst mit dem bewährten Standard-Bundler zu starten. Wenn Rolldown in einer späteren Version stabiler ist, können Sie ihn jederzeit manuell nachrüsten – ohne Ihr Projekt komplett neu aufzusetzen.

Install with npm and start now?

Zum Schluss fragt Sie der Assistent, ob Sie die Installation der Abhängigkeiten direkt jetzt durchführen möchten:

Hier haben Sie zwei Möglichkeiten:

Yes (Empfohlen)

Wenn Sie „Yes“ wählen, wird automatisch:

1. Der Befehl npm install ausgeführt – also alle benötigten Pakete und Abhängigkeiten heruntergeladen.
2. Anschließend optional direkt der Entwicklungsserver mit npm run dev gestartet.

Das ist die bequemste Variante, wenn Sie sofort mit der Arbeit im Projekt beginnen möchten.

No

Wenn Sie „No“ wählen, wird das Projekt nur generiert, aber noch nichts installiert.
Das bedeutet:

• Es wird lediglich die Projektstruktur und package.json erstellt.
• Sie müssen später manuell ausführen:

cd webinar-spa
npm install
npm run dev

Diese Variante kann sinnvoll sein, wenn Sie z. B. zuerst noch etwas in der Projektkonfiguration anpassen oder einen anderen Paketmanager (z. B. pnpm oder yarn) verwenden möchten.

💡 Empfehlung: Für Einsteiger und schnelle Tests ist „Yes“ die einfachste und sicherste Wahl.

Installation & Projektstart

Wenn Sie im letzten Schritt „Yes“ ausgewählt haben, beginnt Vite automatisch damit, alle benötigten Pakete über npm zu installieren und das Projekt einzurichten.

Vite lädt dabei alle erforderlichen Abhängigkeiten (z. B. Vue, TypeScript, Vite-Plugins) herunter und bereitet Ihr Projekt so vor, dass es direkt gestartet werden kann.

Nach Abschluss der Installation sehen Sie eine kurze Erfolgsmeldung – Ihr Projekt ist nun bereit.

Falls der automatische Start nicht erfolgt, können Sie den Entwicklungsserver manuell mit folgenden Befehlen starten:

cd webinar-spa
npm run dev

Zusammenfassung

In diesem Beitrag haben Sie gelernt, was Vite ist und warum es heute das bevorzugte Build-Tool für moderne Vue-Projekte darstellt.
Sie wissen nun, wie Sie mit wenigen Befehlen ein neues Projekt erstellen, die aktuelle stabile Version von Vue 3 installieren und mit TypeScript einrichten können.

Damit haben Sie das Fundament für Ihre zukünftige Anwendung gelegt.
In den kommenden Beiträgen dieser Serie werden wir das Projekt Schritt für Schritt erweitern, Pinia als State-Management integrieren und gemeinsam eine vollständige Single Page Application (SPA) aufbauen – mit WordPress als Backend und Vue als leistungsstarkem Frontend.