Nuxt UI, die intuitive Komponentenbibliothek für Vue-Anwendungen

Eine Vue-Anwendung von Grund auf zu entwickeln bedeutet, Dutzende Entscheidungen zu treffen, bevor auch nur eine einzige Zeile Geschäftslogik geschrieben wird: Welche Komponentenbibliothek soll verwendet werden, wie geht man mit Barrierefreiheit um, wird das Designsystem skalieren und wie eng sollte es mit dem Framework gekoppelt sein? Nuxt UI beantwortet die meisten dieser Fragen, noch bevor man den Editor öffnet.

Was ist Nuxt UI?

Nuxt UI ist eine kostenlose Open-Source-Vue-Komponentenbibliothek, die auf drei Kerntechnologien aufbaut:

• Reka UI – Headless-Primitive mit eingebauter Barrierefreiheit, die Tastaturnavigation, Fokusverwaltung und Screenreader-Unterstützung von Haus aus übernehmen
• Tailwind CSS – Utility-First-Styling mit einem CSS-First-Konfigurationsmodell
• Tailwind Variants – eine typsichere API zur Verwaltung von Komponentenvarianten und zur sauberen Auflösung von Stilkonflikten

Das Ergebnis sind über 125 produktionsreife Komponenten, die standardmäßig barrierefrei, visuell ansprechend und einfach anpassbar sind.

Eine wichtige Klarstellung: Trotz des Namens ist Nuxt UI nicht auf Nuxt beschränkt. Es funktioniert über ein Vite-Plugin genauso gut in jedem Vue-Projekt. Wer mit reinem Vue, Vue Router und Vite arbeitet, benötigt für die Einrichtung nur wenige Konfigurationszeilen.

Wie Nuxt UI in das Vue-Ökosystem passt

Bei der Bewertung einer Vue-Komponentenbibliothek lautet die eigentliche Frage nicht „Bietet sie genügend Komponenten?“ – sondern „Passt sie zu meiner Arbeitsweise?“

So positioniert sich Nuxt UI im Vergleich zu gängigen Alternativen:

Wenn Ihr Stack bereits Tailwind CSS umfasst und Sie hochwertige Komponenten – Datentabellen, Formulare, Overlays, Navigation – ohne Eigenentwicklung wünschen, ist Nuxt UI die natürliche Wahl.

Erste Schritte: Installation

Für Nuxt-Projekte fügen Sie das Modul in nuxt.config.ts ein:

export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  css: ['~/assets/css/main.css']
})

Anschließend umschließen Sie Ihre App mit UApp und importieren die Styles in Ihrer CSS-Einstiegsdatei:

@import "tailwindcss";
@import "@nuxt/ui";

<!-- app.vue -->
<template>
  <UApp>
    <NuxtPage />
  </UApp>
</template>

Für Standard-Vue + Vite-Projekte konfigurieren Sie das Vite-Plugin:

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

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

Anschließend registrieren Sie das Plugin in main.ts und importieren dasselbe CSS. Komponenten und Composables werden in beiden Setups global automatisch importiert.

Wichtige Features im Überblick

Barrierefreiheit ohne Mehraufwand. Da Nuxt UI auf Reka UI aufbaut, übernehmen komplexe Komponenten wie Modals, Tabs und Dropdowns ARIA-Attribute, Focus Trapping und Tastaturinteraktionen automatisch. Tests im jeweiligen Kontext bleiben weiterhin notwendig, aber das Fundament ist solide.

Durchgängige TypeScript-Unterstützung. Jedes Komponenten-Prop, jeder Slot und jedes Event ist typisiert. Theming über app.config.ts ist typsicher, und Props, Slots sowie Composables sind in der gesamten Bibliothek vollständig typisiert.

Theming, das Ihnen nicht im Weg steht. Nuxt UI v4 verwendet ein CSS-First-Konfigurationsmodell. Die Anpassung von Farben, Größen und Varianten erfolgt in CSS oder app.config.ts – keine JavaScript-Konfigurationsdateien, mit denen Sie ringen müssen.

Über 125 Komponenten in 13 Kategorien, darunter spezialisierte Gruppen für Dashboards, KI-Chat-Oberflächen, Rich-Text-Editing und die Integration mit Nuxt Content – Bereiche, in denen die meisten Tailwind-CSS-Vue-Komponentenbibliotheken nichts zu bieten haben.

Wann Nuxt UI die richtige Wahl ist

Nuxt UI ist sinnvoll, wenn Sie Folgendes wünschen:

• Tailwind-native Komponenten, die kein separates Design-Token-System erfordern
• Barrierefreiheit auf Primitive-Ebene, nicht nachträglich aufgesetzt
• Nuxt-4-UI-Komponenten mit erstklassiger Unterstützung für SSR, i18n und Color Mode
• Eine kostenlose, MIT-lizenzierte Bibliothek ohne kostenpflichtige Komponenten (Nuxt UI Pro wurde in v4 in die Hauptbibliothek integriert)

Weniger geeignet ist es, wenn Sie Material Design benötigen, den Quellcode der Komponenten lieber direkt in Ihr Repository kopieren möchten (in dem Fall ist shadcn-vue eine bessere Wahl) oder plattformübergreifende Apps für Mobile und Desktop entwickeln (hier kommt Quasar infrage).

Fazit

Nuxt UI nimmt Ihnen den „Scaffolding-Aufwand“ ab, der die frühe Phase der Vue-Entwicklung bremst. Mit barrierefreien Komponenten, einem stimmigen Designsystem und integriertem TypeScript können Sie sich auf das konzentrieren, was Ihre Anwendung tatsächlich leisten soll, statt Primitive immer wieder neu zu bauen.

Beginnen Sie mit der offiziellen Dokumentation oder klonen Sie eine der fertigen Vorlagen – Dashboard, SaaS, Landing oder Starter – und haben Sie in wenigen Minuten etwas Lauffähiges am Start.

FAQs

Gain Debugging Superpowers

Unleash the power of session replay to reproduce bugs, track slowdowns and uncover frustrations in your app. Get complete visibility into your frontend with OpenReplay — the most advanced open-source session replay tool for developers. Check our GitHub repo and join the thousands of developers in our community.