Einführung

Nuxt UI ist eine umfassende Vue UI-Komponentenbibliothek (Nuxt optional), die über 125 zugängliche Tailwind-CSS-Komponenten für die Erstellung moderner Webanwendungen bietet.

Was ist Nuxt UI?

Eine moderne Vue UI-Komponentenbibliothek, die auf Reka UI, Tailwind CSS und Tailwind Variants basiert, um schöne und zugängliche Anwendungen mit über 125 produktionsfertigen Komponenten zu liefern.

Wenn Sie ein Vue-Projekt mit Tailwind CSS erstellen, ist die Nuxt-Benutzeroberfläche eine großartige Standardwahl. Sie bietet hochwertige, sofort einsatzbereite Komponenten (Datentabellen, Formulare, Overlays, Navigation) und ermöglicht bei Bedarf weiterhin erweiterte Anpassungen.

Developer Experience First

Intuitive APIs, exzellente TypeScript-Unterstützung, automatische Vervollständigung und umfassende Dokumente.

Beautiful by Default

Ein modernes, sauberes Design aus der Box mit einem Thema, das Sie in wenigen Minuten anpassen können

Accessible by Default

WAI-ARIA-kompatibel mit Tastaturnavigation, Fokusmanagement und Screenreader-Unterstützung.

Production Ready

125 + kampferprobte Komponenten, darunter Datentabellen, Formulare, Overlays und Navigation, die von Tausenden von Anwendungen in der Produktion verwendet werden.

Was ist neu in v4?

Nuxt UI v4 markiert einen wichtigen Meilenstein: Nuxt UI und Nuxt UI Pro sind jetzt in einer einzigen, vollständig Open-Source-und kostenlosen Bibliothek mit über 125 produktionsreifen Komponenten und einem vollständigen Figma-Kit vereint.

Die Migration von v3 zu v4 wird viel reibungsloser sein als von v2 zu v3. Lesen Sie mehr im migration-Leitfaden .

Core-Technologie

Nuxt UI basiert auf drei Grundlagen: Reka UI für Verhalten und Zugänglichkeit, Tailwind CSS für das Styling und Tailwind Variants für das Komponieren von Varianten.

Reka UI (englisch)

Nuxt UI ist auf Reka UI als Grundlage für die Komponenten aufgebaut:

  • WAI-ARIA Compliance: Folgt den WAI-ARIA-Authoring-Praktiken mit der richtigen Semantik und Rollen
  • Keyboard Navigation: Integrierte Tastaturunterstützung für komplexe Komponenten wie Registerkarten und Dialoge
  • Focus Management: Intelligentes Fokushandling, das den Fokus basierend auf Benutzerinteraktionen verschiebt
  • Accessible Labels: Abstractions to simplify labeling controls for screen reader (Abstraktionen zur Vereinfachung der Beschriftungssteuerung für Screenreader)

Tailwind CSS (Englisch)

Nuxt UI integriert die neueste Tailwind CSS, bringt erhebliche Verbesserungen:

  • 5x Faster Builds: Vollständige Builds bis zu 5x schneller, inkrementelle Builds über 100x schneller
  • Unified Toolchain: Integrierte Importverarbeitung, Herstellerpräfixierung und Syntaxtransformationen
  • CSS-first Configuration: Anpassen und Erweitern direkt in CSS anstelle von JavaScript
  • Modern Web Features: Containerabfragen, Kaskadenebenen, Farben mit großem Farbraum und mehr

Tailwind-Varianten

Nuxt UI nutzt die Vorteile der Tailwind Variants, um ein leistungsstarkes Designsystem bereitzustellen:

  • Dynamic Styling: Flexible Bauteilvarianten mit einer leistungsstarken API
  • Type Safety: Volle TypeScript-Unterstützung mit automatischer Vervollständigung
  • Conflict Resolution: Effizientes Zusammenführen von widersprüchlichen Stilen

Key Funktionen

Ecosystem-Integration

Nuxt UI ist SSR-kompatibel und lässt sich nahtlos in das Ökosystem integrieren:

  • Icons: Zugriff auf mehr als 200.000 Symbole von Iconify
  • Fonts: Plug-and-Play-Web-Schriftart-Optimierung und Konfiguration
  • Color Mode: Dunkel-und Hellmodus mit automatischer Erkennung
  • i18n: Internationalisieren Sie Ihre Komponenten mit 50 + Sprachen
  • Content: Schöne Typografie aus der Box
  • Icons: Zugriff auf mehr als 200.000 Symbole von Iconify
  • Color Mode: Dunkel-und Hellmodus mit automatischer Erkennung
  • i18n: Internationalisieren Sie Ihre Komponenten mit 50 + Sprachen

Vue-Kompatibilität (Nuxt optional)

Nuxt UI funktioniert mit jedem Vue-Projekt, nicht nur Nuxt. Fügen Sie einfach die Vite-und Vue-Plugins zu Ihrer Konfiguration hinzu:

  • Auto-imports: Komponenten und Compositables werden automatisch importiert und sind weltweit verfügbar
  • Design System: Vollständige Theming-Unterstützung mit anpassbaren Farben, Größen, Varianten und mehr
  • Developer Experience: Vollständige TypeScript-Unterstützung mit IntelliSense und automatischer Vervollständigung
Erfahren Sie, wie Sie die Nuxt-Benutzeroberfläche in einem Vue-Projekt installieren und konfigurieren, im Installationshandbuch **Vue **.

TypeScript Unterstützung.

Nuxt UI bietet eine umfassende TypeScript-Integration für eine überlegene Entwicklererfahrung:

  • Auto-completion: Für alle Komponenten-Requisiten, Slots und Events
  • Generic Components: Verwenden von Vue Generics
  • Type-safe Theming: In app.config.ts (Für Deutschland)
  • IntelliSense: In der gesamten Codebasis

Templates Bearbeiten

Nuxt UI bietet produktionsfertige Vorlagen für Nuxt und Vue, damit Sie schnell loslegen können:

Entdecken Sie alle verfügbaren templates, um Ihr nächstes Projekt zu starten.

FAQ

Installation

Learn how to install and configure Nuxt UI in your Nuxt application.