Nuxt UI im Zusammenspiel

Wann die Standardkomponenten genügen — und wie man sie aus Markdown aufruft.

Nicht jede Fläche braucht einen eigenen Baustein. Nuxt UI bringt Karten, Listen, Personeneinträge und Beitragskarten mit; sie sind aus MDC genauso aufrufbar wie die Bausteine dieser Bibliothek — ::u-page-card statt ::lms-card.

Diese Seite steht deshalb neben den Kategorien und nicht in ihnen: sie dokumentiert fremde Komponenten. Im Katalog taucht sie nicht auf, denn dort gehört nur hinein, was diese Bibliothek liefert und wofür sie eine vollständige API ausweist.

Wann wofür

Nehmen Sie …	wenn …
eine Nuxt-UI-Komponente	die Fläche keine didaktische Absicht trägt: eine Partnerliste, ein Terminhinweis, eine Kachel im Verwaltungsbereich
einen Lms-Baustein	die Form selbst etwas vermittelt: ein Fortschritt, der zum Weitermachen bewegt; eine Karte, die den Stand im Lernpfad zeigt
einen Fx-Baustein	es rein dekorativ ist

Die Faustregel dahinter: ein eigener Baustein lohnt sich, sobald die Bedeutung über die Darstellung hinausgeht — sonst pflegen Sie eine Hülle um etwas, das es schon gibt. Aus genau diesem Grund gibt es hier kein LmsDirectory: eine Liste aus Name, Beschreibung und Verweis ist UPageList mit UUser, und daran ist nichts didaktisch.

Verzeichnis auf hervorgehobener Fläche

Partner, Netzwerke, weiterführende Stellen. UPageCard trägt den Rahmen, UPageList die Trennlinien, UUser den einzelnen Eintrag. Die Klasse dark kippt die Kindelemente auf helle Schrift, damit die Primärfläche trägt.

Unser Netzwerk

Ein UPageCard mit farbiger Fläche, darin eine UPageList aus UUser-Einträgen.

Achtung, Kontrast. bg-primary dark setzt eine dunkle Primärfarbe voraus: dark kippt die Kindelemente auf helle Schrift, und text-muted ist dort ein mittleres Grau. Auf dunklem Blau trägt das, auf dem Grün dieser Vorschau nicht — die Beschreibungen darüber sind kaum zu lesen. Wer die Primärfarbe umschaltbar hält, nimmt besser bg-elevated oder setzt die Schriftfarbe selbst.

Dieselbe Liste ohne Farbfläche

bg-elevated statt bg-primary — trägt bei jeder Primärfarbe.

Terminliste mit Bild

Dieselbe Form, nur mit avatar am UUser und dem Datum als Beschreibung.

Kommende Veranstaltungen

Treffen Sie uns, um über IT-Sicherheit, NIS-2 und Führungsaufgaben zu sprechen.

Beitragskarten

UBlogPosts und UBlogPost sind die Nuxt-UI-Fassung dessen, was die Übersichtsseite von coactum-nuggets benutzt. Für eine reine Artikelliste genügen sie; sobald der Lernstand dazukommt, nehmen Sie LmsPathCard — der Fortschritt lässt sich hier nur über den #authors-Slot einhängen, und das erklärt sich niemandem.

Zwei Artikel

Drei Fallstricke

Ereignisse gehen nicht. Was in MDC steht, kann keine Ereignisse abonnieren — weder @click noch v-model. Eine Nuxt-UI-Komponente, die nur über Ereignisse etwas tut, ist aus Markdown heraus stumm. Deshalb bringen die Dialoge dieser Bibliothek ihren eigenen Auslöseknopf mit; siehe LmsHabitForm.

Farbflächen setzen eine dunkle Primärfarbe voraus. Siehe den Hinweis oben: dark an einer Fläche kippt nur die Tokens, es prüft nicht, ob die Fläche darunter dunkel genug ist.

Objekte brauchen die Bindungsschreibweise. Inline-Attribute sind in MDC immer Zeichenketten. avatar='{"src":"…"}' funktioniert nur mit führendem Doppelpunkt — :avatar='…' — oder im YAML-Frontmatter des Blocks. Ohne ihn bekommt die Komponente den Text {"src":"…"} und zeigt nichts.