Nuxt UI-Designsystem.

Eigenständige Vue-Laufzeit für das Nuxt UI-Designsystem

Verwenden Sie den offiziellen Vue-Integrationspfad

Diese Studie führt @nuxt/ui 4.11.3 mit Vue 3 und Vite aus. Es handelt sich nicht um eine serverseitig gerenderte Nuxt-Anwendung. Das Vite-Plugin löst die generierten UI-Vorlagen, automatischen Komponenten-Imports und Framework-Aliase auf; das Vue-Plugin registriert die erforderliche Laufzeitintegration. Das vollständige Beispiel enthält beide Plugins und vermeidet so eine irreführende Einrichtung, bei der zwar ein Paket installiert wird, #build oder #imports aber nicht aufgelöst werden können.

• @nuxt/ui/vite stellt die Build-Zeit-Integration bereit.
• @nuxt/ui/vue-plugin übernimmt die Laufzeitregistrierung.
• UApp umschließt den nativen Komponentenbaum.

Behalten Sie den Anwendungs-Wrapper und das Stylesheet bei

UApp umschließt die Zusammenstellung. Das Stylesheet importiert Tailwind CSS und @nuxt/ui; der Haupteinstiegspunkt importiert dieses Stylesheet, bevor die Anwendung eingebunden wird. Der Build erzeugt echte Komponenten-CSS und tatsächliches Verhalten statt statischer Nachbildungen von Karten und Schaltern. Dies ist eine konkrete Browser-Einrichtung zur Untersuchung der Bibliothek; eine Nuxt-Anwendung sollte stattdessen die dafür dokumentierte Moduleinrichtung verwenden.

Semantische Farben und Komponentenvarianten des Nuxt UI-Designsystems

Verwenden Sie semantische Farben statt eines kopierten Grüntons

Die Standardkonfiguration ordnet Primär- und Erfolgsmeldungen Grün, Sekundär- und Infomeldungen Blau, Warnungen Gelb, Fehler Rot und neutrale Elemente Schiefergrau zu. Native Komponenten übernehmen diese Aliase über ihre Farb-Props. Der primäre Erstellen-Button und der neutral umrandete Zurücksetzen-Button stehen daher für unterschiedliche Aktionsrollen, ohne eine benutzerdefinierte Palette einzuführen, die fälschlich als Standard von Nuxt UI bezeichnet wird.

Den Geltungsbereich des Erscheinungsbilds klar festlegen

Das Vite-Plugin ist für diese Studie mit ausschließlich hellem Farbschema auf colorMode:false konfiguriert. Die Referenztabelle führt die zugehörigen Deklarationen für helle Text-, Oberflächen- und Rahmenfarben auf. Sie behauptet nicht, dass diese konkreten Werte auch für das dunkle Theme gelten. Wer in einem Produkt einen Farbmodus ergänzt, sollte die gewählte Integration aktivieren und Steuerelemente, Oberflächen und gespeicherte Einstellungen gemeinsam überprüfen.

Nuxt UI Designsystem: Textrollen, Oberflächen und Geometrie

Die semantischen Beziehungen in CSS berücksichtigen

Der unterstützende Text verwendet --ui-text-muted, das auf neutral-500 verweist; die Hauptüberschrift nutzt --ui-text-highlighted, das auf neutral-900 verweist. Oberflächen- und Rahmenvariablen beziehen sich ebenfalls auf die konfigurierte neutrale Farbskala. Der Leitfaden erhält diese Beziehungen, statt alles auf einige unverbundene Hex-Werte zu reduzieren. So ergibt eine Änderung der neutralen Palette weiterhin ein stimmiges Komponententhema.

Gemeinsame Standardwerte von Seitenentscheidungen trennen

In dieser Version beträgt --ui-radius .25rem und --ui-container 80rem. Das ursprüngliche Layout für den Brief legt dagegen eine äußere Maximalbreite von 1100px, zwei Spalten mit 24px Abstand und eine einzelne Spalte unterhalb von 700px fest. Für Überschrift und unterstützende Texte werden die tatsächlichen Textrollen von Tailwind verwendet. Diese Seitenentscheidungen stehen im bereitgestellten CSS und sind keine erfundenen, bibliotheksweiten Anforderungen.

Nuxt UI Designsystem: Feldaufbau und lokale Validierung

Jedes Eingabefeld in einen echten Feldkontext setzen

UFormField stellt um UInput oder UTextarea ein sichtbares Label und einen Namen bereit. Beim Kontextfeld wird außerdem die Wortzahl angezeigt, die aus dem bereinigten Inhalt berechnet wird. Beide Steuerelemente verwenden v-model, sodass die angezeigten Werte und die Compose-Funktion dieselben Refs lesen. Das Textfeld hat eine sinnvolle anfängliche Zeilenzahl und passt seine Höhe automatisch an. Längere Inhalte können dadurch wachsen, statt in einem abgeschnittenen Feld mit fester Höhe zu verschwinden.

Vor dem Erstellen validieren

Nuxt UI Designsystem: Abgeleiteter Entwurf und Schutz vor veralteten Zuständen

Nur vorhandenen Text zusammenstellen

Die Ausgabe kombiniert den angegebenen Titel und Kontext mit einer optionalen, statischen Checkliste zum Teilen. Sie wird ausdrücklich als lokaler Entwurf und nicht als KI-Antwort bezeichnet. Es gibt keinen Modellaufruf, keine künstliche Ladeverzögerung und keine erfundenen generierten Inhalte. Die optionale Checkliste wird über einen nativen booleschen USwitch gesteuert; der zusammengestellte Text berücksichtigt die Auswahl unmittelbar.

Ein altes Ergebnis bei Änderungen der Eingaben löschen

Ein Vue-watch für Titel, Kontext und Checkliste entfernt das zuvor erstellte Ergebnis nach jeder Bearbeitung. Das Status-Badge zeigt dann wieder „Warten auf deinen Text“ an. So wird verhindert, dass ein veralteter Entwurf während der Bearbeitung neuer Eingaben aktuell wirkt. Die Wortzahl bleibt ein berechneter Wert und kann daher nicht vom aktuellen Kontext abweichen.

Nuxt UI Designsystem: Vollständige Leer- und Zurücksetzungszustände

Das Wartefeld sinnvoll gestalten

Vor dem Erstellen enthält die rechte Karte eine ausführliche Erklärung dazu, was angezeigt wird und wie Bearbeitung, Datenschutz und Zurücksetzen funktionieren. Sie ist kein leeres Inhaltsmodul. Nach dem Erstellen wird dort der vollständige, gut lesbare Entwurf mit beibehaltenen Zeilenumbrüchen und natürlichem Textumbruch angezeigt. Das Badge gibt den Status zusätzlich als Text wieder, sodass Farbe nicht das einzige Signal ist.

Auf die vollständigen Beispieldaten zurücksetzen

„Beispiel zurücksetzen“ stellt den ursprünglichen Titel, den vollständigen Kontext und die aktivierte Checkliste wieder her und löscht zugleich das Ergebnis und etwaige Fehlermeldungen. Zurück bleibt keine leere Demo, bei der Leser erraten müssen, welche Inhalte hineingehören. Beim Browsertest wird ein geänderter Brief erstellt und anschließend überprüft, ob nach dem Zurücksetzen wieder der vollständige Beispieltitel angezeigt wird.

Nuxt UI Designsystem: Responsive Karten und Textfluss

Das Ergebnis auch auf schmalen Bildschirmen gut lesbar halten

Unterhalb von 700px werden die beiden Karten zu einer Spalte, und alle Eingaben nutzen die verfügbare Breite. Für den Entwurf wird pre-wrap statt eines nicht umbrechbaren, vorformatierten Texts verwendet, sodass lange Titel oder Sätze natürlich umbrochen werden können. Die Buttons umbrechen innerhalb ihrer Aktionsgruppe. Nach einer tatsächlichen Bearbeitung und dem Erstellen wird die Seite bei 280px sowie auf Smartphone-, Tablet- und Desktopgrößen überprüft.

Zustände nach nativen Übergängen prüfen

Die Gestaltung des Switches umfasst seinen nativen Zustandsübergang. Vor der Aufnahme des Ergebnisses wartet die visuelle Prüfung, damit eine vorübergehende Farbe des Schiebers oder der Schiene nicht mit dem endgültigen Zustand verwechselt wird. Funktionstests prüfen die Wirkung des booleschen Werts, indem sie bestätigen, dass ein deaktivierter Switch die Checkliste tatsächlich aus dem zusammengestellten Text entfernt.

Nuxt UI Designsystem: Vollständiges Vue- und Vite-Projekt

Alle fünf bereitgestellten Dateien verwenden

Das Beispiel enthält App.vue, main.js, style.css, vite.config.mjs und index.html. Die Konfiguration bindet @vitejs/plugin-vue und @nuxt/ui/vite ein; der Haupteinstiegspunkt installiert @nuxt/ui/vue-plugin. Nur @nuxt/ui zu installieren und App.vue einzufügen, ergibt kein vollständiges, ausführbares Projekt. Mit der festgelegten Einrichtung lässt sich die lokale Vorschau samt nativen Komponenten und semantischen Stilen reproduzieren.

1. Alle fünf bereitgestellten Dateien gemeinsam speichern.
2. Die festgelegten Abhängigkeiten installieren.
3. Vite in diesem Verzeichnis starten.
4. Fehlende Eingaben, bearbeitete Ausgaben, das Entfernen der Checkliste und das Zurücksetzen testen.

Diese Browserstudie von der Bereitstellung getrennt halten

Nuxt UI Beispiele für Designsystem-Komponenten

<script setup>
import{ref,computed,watch}from'vue';
const title=ref('A calmer project handoff'),context=ref('Help a small team understand what is ready, what needs a decision, and who owns the next step.'),checklist=ref(true),error=ref(''),brief=ref('');const words=computed(()=>context.value.trim()?context.value.trim().split(/\s+/).length:0);watch([title,context,checklist],()=>{brief.value='';error.value=''});function compose(){if(!title.value.trim()||!context.value.trim()){error.value='Add both a title and context before composing.';return}brief.value=title.value.trim()+'\n\nPurpose\n'+context.value.trim()+(checklist.value?'\n\nBefore sharing\n• Name the next decision.\n• Identify an owner.\n• Include the source materials.':'')+'\n\nThis is a local draft, not a generated AI response.';}function reset(){title.value='A calmer project handoff';context.value='Help a small team understand what is ready, what needs a decision, and who owns the next step.';checklist.value=true;brief.value='';error.value=''}
</script>
<template><UApp><main><p class="text-primary font-semibold text-sm">NUXT UI / ORIGINAL BRIEF COMPOSER</p><h1 class="text-4xl font-bold tracking-tight mt-4 text-highlighted">Put the next step into words.</h1><p class="text-muted mt-5 max-w-2xl leading-7">A local composition tool using Nuxt UI 4.11.3 in a standalone Vue application. The preview assembles your text; it does not call an AI model.</p><div class="layout"><UCard><template #header><h2 class="font-semibold text-xl">Write the essentials</h2></template><div class="stack"><UFormField label="Brief title" name="title"><UInput v-model="title" class="w-full" placeholder="Name the work" aria-label="Brief title"/></UFormField><UFormField label="Context" name="context" :description="words+' words in your context'"><UTextarea v-model="context" class="w-full" autoresize :rows="5" placeholder="What should the next person understand?" aria-label="Context"/></UFormField><USwitch v-model="checklist" label="Include the sharing checklist"/><p v-if="error" role="alert" class="text-error text-sm">{{error}}</p><div class="flex flex-wrap gap-3"><UButton @click="compose">Compose local brief</UButton><UButton color="neutral" variant="outline" @click="reset">Reset sample</UButton></div></div></UCard><UCard><template #header><div class="flex justify-between gap-3 flex-wrap"><h2 class="font-semibold text-xl">Readable draft</h2><UBadge :color="brief?'success':'neutral'" variant="subtle">{{brief?'Composed locally':'Waiting for your text'}}</UBadge></div></template><div v-if="brief" class="brief" role="status">{{brief}}</div><div v-else class="space-y-4 text-muted leading-7"><p>Your draft will keep the title and context you provide, with an optional sharing checklist.</p><ul class="list-disc pl-5 space-y-2"><li>Editing any input clears an older composed result.</li><li>No content leaves the browser.</li><li>Reset returns to the complete sample inputs.</li></ul></div></UCard></div><p class="notes text-muted">Actual UCard, UFormField, UInput, UTextarea, USwitch, UButton and UBadge components with Nuxt UI’s default semantic theme. Original application content and state; this example uses Vue/Vite, not a Nuxt server.</p></main></UApp></template>

import{createApp}from'vue';import ui from'@nuxt/ui/vue-plugin';import App from'./App.vue';import './style.css';createApp(App).use(ui).mount('#app');

@import 'tailwindcss';
@import '@nuxt/ui';
body{margin:0}*{box-sizing:border-box}main{max-width:1100px;margin:auto;padding:32px}.layout{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:32px}.stack{display:grid;gap:24px}.brief{white-space:pre-wrap;line-height:1.7;overflow-wrap:anywhere}.notes{font-size:13px;line-height:1.6;margin-top:24px}@media(max-width:700px){main{padding:16px}.layout{grid-template-columns:1fr}}textarea{min-height:150px}button{max-width:100%}

import{defineConfig}from'vite';import vue from'@vitejs/plugin-vue';import ui from'@nuxt/ui/vite';export default defineConfig({plugins:[vue(),ui({colorMode:false})],base:'./',build:{cssCodeSplit:false}});

<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Project brief composer</title></head><body><div id="app"></div><script type="module" src="./main.js"></script></body></html>