Nuxt UI: die Komponentenbibliothek in v4 einbinden und einen Agenten nach AGENTS.md arbeiten lassen

Für wen

Wenn du eine Nuxt-Oberfläche baust und fertige Vue-UI willst, statt barrierefreie Komponenten von null zusammenzusetzen, passt dieses Repository besser. Es verbindet Reka UI, Tailwind CSS und Tailwind Variants für komplexe, zugängliche, leistungsfähige Oberflächen. Zugehörige Upstreams sind

https://reka-ui.com/

https://tailwindcss.com/

https://www.tailwind-variants.org/

Du brauchst ein Nuxt-Projekt, das nuxt.config ändern kann, und akzeptierst die Installation von Abhängigkeiten mit pnpm. Wer nur einen Coding-Agenten Komponenten, Themes oder Tests ändern lassen will, sollte zuerst das AGENTS.md des Repositories lesen. Es schreibt kein bestimmtes Agent-Produkt als einziges unterstütztes Ziel; es sagt nur, dass es von all AI coding agents automatisch aufgenommen wird.

Ersten Versuch in 3 Minuten abschließen

Der offizielle Installationsbefehl steht auf der Seite als dieser:

pnpm add @nuxt/ui tailwindcss

Das ändert Projektabhängigkeiten; es ist kein Nur-Lese-Blick. Zuerst bestätigen, dass das aktuelle Verzeichnis deine Nuxt-App ist und dieser Rechner pnpm hat, dann ausführen. Nach der Installation das Modul in die Konfiguration schreiben. Der Auszug gibt:

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

Er verlangt, dass der CSS-Einstieg ~/assets/css/main.css existiert, schreibt aber den Dateiinhalt nicht. Kein @import und keine Komponentenverwendung erfinden. Erfolgssignal: die Abhängigkeit ist installiert, modules zeigt @nuxt/ui, und die App startet auf deine bestehende Weise ohne Fehler, weil dieses Modul fehlt. Beginnt der Agent, Button-Beispiele hinzuzufügen, die im Auszug nicht vorkommen, oder Theme-Tokens zu ändern, zuerst stoppen.

Prüfung mit geringerem Risiko: öffnen

https://github.com/nuxt/ui/blob/v4/AGENTS.md

Den Agenten nur Komponentenstruktur oder Theme-Konventionen erklären lassen, Dateien noch nicht ändern.

Anwendungsfälle

Fall 1: v4 in eine Nuxt-App holen. Mit dem pnpm-Befehl oben @nuxt/ui und tailwindcss installieren, dann das Modul @nuxt/ui registrieren und auf ~/assets/css/main.css zeigen. Die Seite schreibt keine npm/yarn-Äquivalente und nicht, wie man die erste Komponente in einer Vue-Single-File importiert. Bestätigen kannst du nur diese zwei Schritte: Abhängigkeit und Modulregistrierung. Was in die CSS-Datei gehört und welche Komponente auf die Seite kommt, liegt außerhalb dieses Auszugs; du musst lokale Docs oder Quellen nachschlagen, die du schon hast, und darfst nicht so tun, als stünde das hier schon.

Fall 2: Einen Coding-Agenten nach den Repo-Regeln arbeiten lassen. AGENTS.md gibt KI-Assistenten Beitragsleitfäden, deckt Komponentenstruktur, Theme-Muster, Testkonventionen und Doku-Hinweise und wird automatisch aufgenommen. Die Aufgabe soll ein Nur-Lese-Abgleich sein, zum Beispiel «nach AGENTS.md prüfen, ob Struktur/Theme/Tests dieser Komponente abweichen». Es schreibt keine konkreten Testbefehle und keine Veröffentlichungsart einer Doku-Site. Beim ersten Mal den Agenten also nicht Doku stapelweise umschreiben oder Testdateien ergänzen lassen; zuerst die stützenden Absätze und die zu ändernden Pfade zeigen lassen.

Nutzungsgrenzen

Du siehst jetzt den Zweig v4. Nuxt UI v3 liegt unter

https://github.com/nuxt/ui/tree/v3

v2 unter

https://github.com/nuxt/ui/tree/v2

Modulnamen, Verzeichnisse oder Theme-Schreibweisen alter Zweige nicht auf v4 anwenden. Die Seite schreibt keine Migrationstabelle v4 zu v3.

Installationsweg ist pnpm add @nuxt/ui tailwindcss. Keinen anderen Paketmanager-Befehl daneben stellen. Reka UI und Tailwind Variants sind als Fähigkeitsquellen geschrieben, nicht als zweiter Installer.

Beim ersten Mal bei Abhängigkeiten installieren, Modul registrieren oder nur AGENTS.md lesen stoppen. Jede Änderung an Komponentenquellcode, ergänzte Tests, Theme-Änderungen oder Umschreiben des CSS-Einstiegs muss zuerst den Agenten die zu ändernden Dateien wiedergeben lassen; du bestätigst, dann weiter.