Sistema di progettazione Nuxt UI.

Sistema di design Nuxt UI Runtime Vue standalone per il sistema di progettazione

Usa il percorso ufficiale di integrazione Vue

Questo esempio esegue @nuxt/ui 4.11.3 con Vue 3 e Vite. Non è un’applicazione Nuxt renderizzata lato server. Il plugin Vite risolve i template UI generati, l’import automatico dei componenti e gli alias del framework; il plugin Vue registra l’integrazione runtime necessaria. L’esempio completo include entrambi, evitando una configurazione fuorviante che installa un pacchetto ma lascia irrisolti #build o #imports.

• @nuxt/ui/vite fornisce l’integrazione in fase di build.
• @nuxt/ui/vue-plugin fornisce la registrazione runtime.
• UApp avvolge l’albero dei componenti nativi.

Mantieni il wrapper dell’applicazione e il foglio di stile

UApp avvolge la composizione. Il foglio di stile importa Tailwind CSS e @nuxt/ui, mentre l’entry point principale importa il foglio di stile prima di montare l’applicazione. La build genera veri componenti CSS e comportamenti, non approssimazioni statiche di schede e interruttori. Questa è una configurazione concreta per il browser, utile a esaminare la libreria; un’applicazione Nuxt dovrebbe usare la propria configurazione documentata del modulo.

Sistema di design Nuxt UI Colori semantici e varianti dei componenti del sistema di progettazione

Usa colori semantici, non un verde copiato

La configurazione predefinita associa primary e success al verde, secondary e info al blu, warning al giallo, error al rosso e neutral all’ardesia. I componenti nativi usano questi alias tramite le proprietà color. Il pulsante principale di composizione e quello di ripristino con contorno neutro rappresentano quindi ruoli d’azione distinti, senza introdurre una palette personalizzata spacciata per valore predefinito di Nuxt UI.

Specifica chiaramente l’ambito dell’aspetto

Per questo esempio con solo tema chiaro, il plugin Vite è configurato con colorMode:false. La tabella di riferimento elenca le corrispondenti dichiarazioni per testo, superfici e bordi chiari. Non afferma che gli stessi valori letterali siano usati anche nel tema scuro. Se un prodotto aggiunge la modalità colore, dovrebbe abilitare l’integrazione scelta e verificare insieme i controlli, le superfici e le preferenze salvate.

Sistema di design Nuxt UI Ruoli del testo, superfici e geometria del sistema di progettazione

Comprendi le relazioni semantiche di CSS

Il testo di supporto usa --ui-text-muted, che rimanda a neutral-500; il titolo principale usa --ui-text-highlighted, che rimanda a neutral-900. Anche le variabili per superfici e bordi fanno riferimento alla scala neutral configurata. La guida mantiene queste relazioni invece di appiattirle in pochi valori esadecimali scollegati, così una modifica alla palette neutra produce comunque un tema coerente per i componenti.

Distingui i valori predefiniti condivisi dalle scelte di pagina

In questa versione, --ui-radius condiviso vale .25rem e --ui-container vale 80rem. Il layout originale della scheda sceglie invece una larghezza esterna massima di 1100px, due colonne con una spaziatura di 24px e una sola colonna sotto i 700px. I ruoli tipografici effettivi di Tailwind determinano le dimensioni del titolo e del testo di supporto. Queste scelte di pagina sono incluse nel CSS fornito e non sono requisiti inventati per l’intera libreria.

Sistema di design Nuxt UI Composizione dei campi e convalida locale del sistema di progettazione

Fornisci a ogni input un contesto di campo effettivo

UFormField associa un’etichetta visibile e un nome a UInput o UTextarea. Il campo del contesto mostra anche il conteggio delle parole, calcolato sul contenuto senza spazi iniziali o finali. Entrambi i controlli usano v-model, così i valori visualizzati e la funzione di composizione leggono gli stessi ref. La textarea ha un numero iniziale di righe adeguato e usa autoresize: il testo più lungo può così estendersi, invece di finire tagliato in un riquadro a altezza fissa.

Convalida prima di comporre

Sistema di design Nuxt UI Bozza derivata e prevenzione degli stati obsoleti del sistema di progettazione

Componi il testo presente, senza aggiunte

L’output combina il titolo e il contesto forniti con una checklist statica facoltativa per la condivisione. Il risultato è indicato come bozza locale, non come risposta di un’AI. Non ci sono chiamate a modelli, tempi di caricamento o contenuti generati inventati. La checklist facoltativa è controllata tramite un booleano del componente nativo USwitch e il testo composto riflette direttamente la scelta.

Rimuovi i risultati obsoleti quando cambiano gli input

Un watch di Vue sui campi titolo, contesto e checklist rimuove il risultato composto precedente a ogni modifica. L’etichetta di stato torna quindi a In attesa del testo. In questo modo, una bozza obsoleta non sembra attuale mentre l’utente modifica nuovi input. Il conteggio delle parole resta un valore calcolato, perciò è sempre aggiornato rispetto al contesto corrente.

Sistema di design Nuxt UI Stati vuoti e di ripristino completi del sistema di progettazione

Rendi utile il pannello di attesa

Prima della composizione, la scheda a destra spiega nel dettaglio cosa verrà mostrato e come funzionano le modifiche, la privacy e il ripristino. Non è una sezione di contenuto vuota. Dopo la composizione, mostra la bozza completa e leggibile, mantenendo interruzioni di riga e ritorni a capo. L’etichetta ripete lo stato in forma testuale, così il colore non è l’unico indicatore.

Ripristina tutti gli input di esempio

Ripristina esempio ripristina il titolo originale, l’intero contesto e la checklist attivata, eliminando il risultato e gli eventuali errori. Non lascia una dimostrazione vuota, costringendo chi legge a indovinare quali contenuti inserire. Il controllo nel browser compone una scheda modificata e poi verifica che il ripristino restituisca il titolo completo di esempio.

Sistema di design Nuxt UI Schede responsive e flusso del testo del sistema di progettazione

Mantieni leggibile il risultato anche a larghezze ridotte

Sotto i 700px, le due schede si dispongono in un’unica colonna e tutti gli input occupano la larghezza disponibile. La bozza usa pre-wrap anziché un testo preformattato senza ritorno a capo, così i titoli e le frasi lunghi si adattano in modo naturale. I pulsanti vanno a capo all’interno del gruppo di azioni. Dopo una modifica e una composizione effettive, la pagina viene verificata a 280px e alle larghezze di telefono, tablet e desktop.

Esamina lo stato dopo le transizioni native

Lo stile dello switch include la transizione di stato nativa. Prima di acquisire il risultato, il controllo visivo attende che la transizione termini, per non scambiare il colore intermedio del cursore o della traccia per quello definitivo. I controlli funzionali verificano l’effetto booleano accertando che uno switch disattivato rimuova davvero la checklist dal testo composto.

Nuxt UI Progetto completo Vue e Vite del sistema di design

Usa tutti e cinque i file forniti

L’esempio fornisce App.vue, main.js, style.css, vite.config.mjs e index.html. La configurazione include @vitejs/plugin-vue e @nuxt/ui/vite; il punto di ingresso principale installa @nuxt/ui/vue-plugin. Installare solo @nuxt/ui e incollare App.vue non basta per ottenere un progetto completo ed eseguibile. La configurazione con versioni bloccate riproduce l’anteprima locale con i componenti nativi effettivi e gli stili semantici.

1. Salva insieme tutti e cinque i file forniti.
2. Installa le dipendenze con versioni bloccate.
3. Avvia Vite in quella directory.
4. Verifica input mancanti, output modificato, rimozione dalla checklist e ripristino.

Tieni questo studio nel browser separato dalla distribuzione

Nuxt UI Esempi di componenti del sistema di design

<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>