Système de design Nuxt UI.

Environnement d’exécution Vue autonome du système de design Nuxt UI

Utilisez le parcours d’intégration officiel de Vue

Cette étude exécute @nuxt/ui 4.11.3 avec Vue 3 et Vite. Il ne s’agit pas d’une application Nuxt avec rendu côté serveur. Le plug-in Vite résout les modèles d’interface générés, les imports automatiques des composants et les alias du framework ; le plug-in Vue enregistre l’intégration requise à l’exécution. L’exemple complet inclut les deux plug-ins, évitant ainsi une configuration trompeuse qui installe un package sans résoudre #build ou #imports.

• @nuxt/ui/vite fournit l’intégration à la compilation.
• @nuxt/ui/vue-plugin fournit l’enregistrement à l’exécution.
• UApp enveloppe l’arborescence native des composants.

Conservez le composant englobant de l’application et la feuille de style

UApp enveloppe la composition. La feuille de style importe Tailwind CSS et @nuxt/ui, et le point d’entrée principal importe cette feuille avant de monter l’application. La compilation produit de véritables composants CSS et leur comportement, plutôt que de simples imitations statiques de cartes et d’interrupteurs. Il s’agit d’une configuration concrète pour examiner la bibliothèque dans un navigateur ; une application Nuxt doit utiliser la configuration de module décrite dans sa propre documentation.

Couleurs sémantiques et variantes de composants du système de design Nuxt UI

Utilisez des couleurs sémantiques plutôt qu’un vert repris tel quel

La configuration par défaut associe primary et success au vert, secondary et info au bleu, warning au jaune, error au rouge et neutral à l’ardoise. Les composants natifs utilisent ces alias via leurs propriétés de couleur. Le bouton principal de composition et le bouton de réinitialisation neutre au contour visible représentent donc des rôles d’action distincts, sans introduire de palette personnalisée présentée à tort comme une valeur par défaut de Nuxt UI.

Délimitez clairement le périmètre de l’apparence

Le plug-in Vite est configuré avec colorMode:false pour cette étude en mode clair uniquement. Le tableau de référence répertorie les déclarations correspondantes pour le texte, les surfaces et les bordures clairs. Il ne prétend pas que ces valeurs littérales s’appliquent également au thème sombre. Pour ajouter un mode de couleur à un produit, activez l’intégration choisie et vérifiez ensemble ses contrôles, ses surfaces et ses préférences enregistrées.

Rôles de texte, surfaces et géométrie du système de design Nuxt UI

Lire les relations sémantiques CSS

Le texte d’accompagnement utilise --ui-text-muted, qui pointe vers neutral-500 ; le titre principal utilise --ui-text-highlighted, qui pointe vers neutral-900. Les variables de surface et de bordure font de même référence à l’échelle de neutres configurée. Le guide préserve ces relations au lieu de tout réduire à quelques valeurs hexadécimales sans lien entre elles. Ainsi, la modification de la palette de neutres conserve la cohérence du thème des composants.

Distinguer les valeurs par défaut partagées des choix propres à la page

Dans cette version, --ui-radius vaut .25rem et --ui-container vaut 80rem. La mise en page du brief d’origine choisit plutôt une largeur maximale extérieure de 1100px, deux colonnes séparées par un espace de 24px et une seule colonne sous 700px. Les rôles typographiques réels de Tailwind définissent les tailles du titre et du texte d’accompagnement. Ces choix propres à la page figurent dans CSS fourni ; ils ne sont pas présentés à tort comme des exigences applicables à toute la bibliothèque.

Composition de champs et validation locale dans le système de design Nuxt UI

Fournir un véritable contexte de champ à chaque saisie

UFormField fournit un libellé visible et un nom autour de UInput ou UTextarea. Le champ de contexte affiche également le nombre de mots, calculé à partir de son contenu sans espaces superflus au début ni à la fin. Les deux contrôles utilisent v-model : les valeurs affichées et le gestionnaire de composition lisent donc les mêmes refs. La zone de texte comporte un nombre de lignes initial utile et s’agrandit automatiquement. Le contenu utilisateur plus long peut ainsi s’afficher sans être tronqué dans une zone fixe.

Valider avant de composer

Brouillon dérivé du système de design Nuxt UI et prévention des états obsolètes

Assembler uniquement le texte disponible

La sortie combine le titre et le contexte fournis avec une liste statique facultative de conseils à partager. Le résultat indique qu’il s’agit d’un brouillon local, et non d’une réponse générée par une IA. Aucun appel à un modèle, délai de chargement ou contenu généré fictif n’est ajouté. La liste facultative est contrôlée par un booléen natif USwitch, et le texte assemblé reflète directement ce choix.

Effacer l’ancien résultat lorsque les saisies changent

Un watch Vue portant sur le titre, le contexte et la liste efface le résultat composé après chaque modification. Le badge d’état revient alors à « En attente de votre texte ». Cela évite qu’un brouillon obsolète semble à jour lorsque l’utilisateur modifie de nouvelles saisies. Le nombre de mots reste une valeur calculée : il ne peut donc pas diverger du contexte actuel.

États vide et réinitialisé complets dans le système de design Nuxt UI

Rendre le panneau d’attente utile

Avant la composition, la carte de droite explique en détail ce qui s’affichera, ainsi que le fonctionnement de la modification, de la confidentialité et de la réinitialisation. Ce n’est pas un module de contenu vide. Après la composition, l’espace affiche le brouillon complet et lisible, en préservant les retours à la ligne et le renvoi à la ligne. Le badge répète l’état sous forme de texte : la couleur n’est donc pas le seul repère.

Réinitialiser avec toutes les saisies de l’exemple

La réinitialisation restaure le titre d’origine, le contexte complet et la liste activée, tout en effaçant le résultat et les éventuelles erreurs. Elle ne laisse pas une démonstration vide qui obligerait le lecteur à deviner quel contenu saisir. Le test dans le navigateur compose un brief modifié, puis vérifie qu’après la réinitialisation, le titre complet de l’exemple est rétabli.

Cartes adaptatives et flux du texte dans le système de design Nuxt UI

Préserver la lisibilité du résultat sur les petits écrans

Sous 700px, les deux cartes passent sur une seule colonne et toutes les saisies utilisent la largeur disponible. Le brouillon utilise pre-wrap plutôt qu’un texte préformaté impossible à renvoyer à la ligne ; un titre ou une phrase longue peut donc se répartir naturellement. Les boutons passent à la ligne dans leur groupe d’actions. La page est vérifiée à 280px ainsi qu’aux formats téléphone, tablette et ordinateur, après une véritable modification et une composition.

Examiner l’état après les transitions natives

Le style de Switch inclut sa transition d’état native. La vérification visuelle attend avant de capturer le résultat, afin de ne pas confondre la position intermédiaire du curseur ou la couleur de la piste avec l’état final. Les tests fonctionnels vérifient l’effet du booléen en confirmant qu’un commutateur désactivé retire bien la liste du texte composé.

Projet Vue et Vite complet pour le système de design Nuxt UI

Utiliser les cinq fichiers fournis

L’exemple fournit App.vue, main.js, style.css, vite.config.mjs et index.html. La configuration inclut @vitejs/plugin-vue et @nuxt/ui/vite ; le point d’entrée principal installe @nuxt/ui/vue-plugin. Installer uniquement @nuxt/ui et coller App.vue ne constitue pas un projet complet exécutable. Cette configuration avec versions épinglées reproduit l’aperçu local avec les composants natifs et les styles sémantiques réellement utilisés.

1. Enregistrer ensemble les cinq fichiers fournis.
2. Installer les dépendances avec leurs versions épinglées.
3. Lancer Vite dans ce répertoire.
4. Tester la saisie manquante, la modification du résultat, le retrait de la liste et la réinitialisation.

Garder cette étude dans le navigateur, séparée du déploiement

Exemples de composants du système de design Nuxt UI

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