UI-Bibliotheken

Statt ein eigenes Design System zu entwickeln, kann eine fertige UI-Bibliothek viel Zeit sparen. Diese bieten umfangreiche, getestete Komponenten mit Accessibility-Support.

Hinweis

Dieses Kapitel gibt einen Überblick. Detaillierte Anleitungen zu einzelnen Libraries folgen.

Populäre Vue UI-Libraries

Library	Stil	Komponenten	Besonderheit
Vuetify	Material Design	80+	Google Material, umfangreich
PrimeVue	Eigenes Design	90+	Viele Themes, Enterprise
Quasar	Material + Eigene	70+	Multi-Platform (SPA, SSR, Mobile)
Naive UI	Modern/Clean	80+	TypeScript-first
Element Plus	Clean/Business	70+	Beliebt in China, gut dokumentiert
Ant Design Vue	Ant Design	60+	Enterprise-fokussiert

Vergleich

Vuetify

Material Design 3

npm install vuetify

• Größte Community
• Umfangreichste Dokumentation
• Material Design Richtlinien
• Guter TypeScript-Support

Ideal für: Apps die Material Design nutzen wollen

PrimeVue

Flexible Themes

npm install primevue

• 90+ Komponenten
• Viele fertige Themes
• Guter Enterprise-Support
• Unstyled-Modus verfügbar

Ideal für: Enterprise-Anwendungen, eigenes Branding

Quasar

Multi-Platform

npm install quasar @quasar/extras

• SPA, SSR, PWA, Mobile, Desktop
• Eigenes CLI
• Alle Plattformen aus einer Codebase
• Icons & Fonts inklusive

Ideal für: Cross-Platform Projekte

Headless

Unstyled Components

• Radix Vue

• Headless UI

• Nur Logik & Accessibility

• Styling komplett selbst

• Maximale Flexibilität

• Kleinere Bundle-Größe

Ideal für: Eigenes Design mit solidem Fundament

Auswahlkriterien

Design-Anforderungen

• Eigenes Branding: PrimeVue (Themes), Headless
• Material Design: Vuetify, Quasar
• Neutrales Design: Naive UI, Element Plus

Technische Anforderungen

• TypeScript: Naive UI, PrimeVue, Vuetify 3
• SSR/Nuxt: Alle großen Libraries
• Mobile Apps: Quasar (Capacitor/Cordova)
• Bundle-Größe: Headless, Tree-Shaking wichtig

Team & Projekt

• Große Community: Vuetify, Element Plus
• Enterprise Support: PrimeVue, Vuetify
• Deutsche Docs: Teilweise bei allen

Bundle-Größe

Library	Basis	Mit Tree-Shaking
Vuetify	~300 KB	~50-150 KB
PrimeVue	~200 KB	~30-100 KB
Quasar	~250 KB	~40-120 KB
Naive UI	~150 KB	~20-80 KB
Headless UI	~15 KB	~5-10 KB

Tipp

Tree-Shaking ist entscheidend! Importiere nur die Komponenten, die du brauchst.

Quick Start Beispiel

// Beispiel: PrimeVue Setup
import { createApp } from 'vue'
import PrimeVue from 'primevue/config'
import Button from 'primevue/button'
import InputText from 'primevue/inputtext'
import 'primevue/resources/themes/lara-light-blue/theme.css'

const app = createApp(App)
app.use(PrimeVue)
app.component('Button', Button)
app.component('InputText', InputText)
app.mount('#app')

Entscheidungshilfe

Brauchst du Material Design?
├── Ja → Vuetify oder Quasar
└── Nein
    ├── Eigenes Branding wichtig?
    │   ├── Ja → PrimeVue (Themes) oder Headless
    │   └── Nein → Naive UI, Element Plus
    └── Multi-Platform (Mobile/Desktop)?
        ├── Ja → Quasar
        └── Nein → Nach Komponenten-Bedarf wählen

Weiterführend

• Design System entwickeln - Eigene Komponenten bauen
• Props - Komponenten-APIs verstehen

Offizielle Dokumentation:

• Vuetify
• PrimeVue
• Quasar
• Naive UI
• Element Plus
• Radix Vue