Sistema de diseño de Nuxt UI.

Nuxt UI: entorno de ejecución independiente de Vue para el sistema de diseño

Usa la vía de integración oficial de Vue

Este estudio ejecuta @nuxt/ui 4.11.3 en Vue 3 con Vite. No es una aplicación de Nuxt renderizada en el servidor. El plugin de Vite resuelve las plantillas de UI generadas, las importaciones automáticas de componentes y los alias del framework; el plugin de Vue registra la integración necesaria en tiempo de ejecución. El ejemplo completo incluye ambos para evitar una configuración engañosa que instala un paquete, pero deja sin resolver #build o #imports.

• @nuxt/ui/vite proporciona la integración en tiempo de compilación.
• @nuxt/ui/vue-plugin proporciona el registro en tiempo de ejecución.
• UApp envuelve el árbol de componentes nativos.

Mantén el contenedor de la aplicación y la hoja de estilos

UApp envuelve la composición. La hoja de estilos importa Tailwind CSS y @nuxt/ui, y la entrada principal importa esa hoja antes de montar la aplicación. La compilación genera componentes CSS reales y su comportamiento, en lugar de aproximaciones estáticas de tarjetas e interruptores. Esta configuración concreta del navegador permite inspeccionar la biblioteca; una aplicación Nuxt debe usar la configuración de módulo documentada para ella.

Nuxt UI: colores semánticos y variantes de componentes del sistema de diseño

Usa colores semánticos, no un verde copiado

La configuración predeterminada asigna el verde a primary y success, el azul a secondary e info, el amarillo a warning, el rojo a error y el gris pizarra a neutral. Los componentes nativos consumen esos alias mediante sus propiedades de color. Por ello, el botón principal para componer y el botón secundario con contorno neutro representan funciones de acción distintas, sin introducir una paleta personalizada y presentarla erróneamente como predeterminada de Nuxt UI.

Delimita claramente el ámbito de apariencia

El plugin de Vite está configurado con colorMode:false para este estudio solo con tema claro. La tabla de referencia enumera las declaraciones correspondientes de texto, superficie y borde para el tema claro. No afirma que esos valores literales también se apliquen al tema oscuro. Si un producto añade un modo de color, debe habilitar la integración elegida y verificar en conjunto sus controles, superficies y preferencias guardadas.

Nuxt UI: roles de texto, superficies y geometría del sistema de diseño

Interpreta las relaciones semánticas de CSS

El texto de apoyo usa --ui-text-muted, que apunta a neutral-500; el encabezado principal usa --ui-text-highlighted, que apunta a neutral-900. Las variables de superficie y borde también hacen referencia a la escala neutra configurada. La guía conserva esas relaciones en lugar de reducirlo todo a unos pocos valores hexadecimales inconexos, de modo que al cambiar la paleta neutra se mantenga un tema de componentes coherente.

Distingue los valores predeterminados compartidos de las decisiones de página

En esta versión, --ui-radius compartido es .25rem y --ui-container es 80rem. En cambio, el diseño original del encargo elige un ancho exterior máximo de 1100px, dos columnas con una separación de 24px y una sola columna por debajo de 700px. Los roles de texto reales de Tailwind determinan los tamaños del titular y del texto de apoyo. Esas decisiones de página están en el CSS proporcionado; no son requisitos inventados para toda la biblioteca.

Nuxt UI: composición de campos y validación local del sistema de diseño

Asigna a cada entrada un contexto de campo real

UFormField proporciona una etiqueta visible y un nombre alrededor de UInput o UTextarea. El campo de contexto también muestra el recuento de palabras calculado a partir de su contenido sin espacios al principio ni al final. Ambos controles usan v-model, por lo que los valores mostrados y el controlador de composición leen las mismas refs. El área de texto tiene un número inicial de filas adecuado y autoresize, lo que permite que el contenido más largo crezca en lugar de quedar oculto en un cuadro fijo recortado.

Valida antes de componer

Nuxt UI: borrador derivado y prevención de estados obsoletos del sistema de diseño

Combina únicamente el texto disponible

El resultado combina el título y el contexto proporcionados con una lista de verificación opcional y estática para compartir. Indica que se trata de un borrador local, no de una respuesta de IA. No hay ninguna llamada a un modelo, demora de carga ni contenido generado inventado. La lista de verificación opcional se controla mediante un booleano nativo de USwitch, y el texto compuesto refleja directamente esa selección.

Borra los resultados anteriores cuando cambien las entradas

Un watch de Vue sobre el título, el contexto y la lista de verificación elimina el resultado compuesto anterior cada vez que se edita alguno de ellos. La etiqueta de estado vuelve entonces a Esperando tu texto. Así se evita que un borrador obsoleto parezca actualizado mientras el usuario edita nuevas entradas. El recuento de palabras sigue siendo un valor computado, por lo que siempre corresponde al contexto actual.

Nuxt UI Estados vacíos y de restablecimiento completos del sistema de diseño

Aprovecha el panel de espera

Antes de crear el borrador, la tarjeta de la derecha explica por completo qué aparecerá y cómo funcionan la edición, la privacidad y el restablecimiento. No es un módulo de contenido vacío. Una vez creado el borrador, ese espacio muestra el texto completo y legible, con los saltos de línea y el ajuste de texto conservados. La insignia también indica el estado mediante texto, para que el color no sea la única señal.

Restablecer los datos de ejemplo completos

Al restablecer los datos de ejemplo, se recuperan el título original, todo el contexto y la lista de verificación activada, y se borran el resultado y cualquier error. Así, la demostración no queda en blanco ni obliga a adivinar qué contenido debería aparecer. La comprobación en el navegador crea un borrador modificado y luego verifica que, tras restablecerlo, vuelva a aparecer el título completo de ejemplo.

Nuxt UI Tarjetas adaptables y flujo de texto del sistema de diseño

Mantén el resultado legible en pantallas estrechas

Por debajo de los 700 px, las dos tarjetas pasan a una sola columna y todas las entradas ocupan el ancho disponible. El borrador utiliza pre-wrap en lugar de una línea preformateada que no se ajusta, de modo que los títulos o las frases largas pueden ajustarse con naturalidad. Los botones se ajustan dentro de su grupo de acciones. Tras editar y crear un borrador, se comprueba la página a 280 px y también en tamaños de móvil, tableta y escritorio.

Inspecciona el estado tras las transiciones nativas

El estilo del interruptor incluye su transición de estado nativa. La comprobación visual espera antes de capturar el resultado, para no confundir una posición intermedia del control o un color transitorio de la pista con el estado final. Las comprobaciones funcionales verifican el efecto booleano: confirman que, al desactivar el interruptor, se elimina la lista de verificación del texto creado.

Nuxt UI Proyecto completo de Vue y Vite del sistema de diseño

Utiliza los cinco archivos proporcionados

El ejemplo incluye App.vue, main.js, style.css, vite.config.mjs e index.html. La configuración incluye @vitejs/plugin-vue y @nuxt/ui/vite; el punto de entrada principal instala @nuxt/ui/vue-plugin. Instalar solo @nuxt/ui y pegar App.vue no constituye un proyecto completo que pueda ejecutarse. La configuración con versiones fijadas reproduce la vista previa local con sus componentes nativos y estilos semánticos reales.

1. Guarda juntos los cinco archivos proporcionados.
2. Instala las dependencias con versiones fijadas.
3. Ejecuta Vite en ese directorio.
4. Prueba la entrada que falta, el resultado editado, la eliminación de la lista de verificación y el restablecimiento.

Mantén este estudio del navegador separado de la implementación

Nuxt UI Ejemplos de componentes del sistema de diseño

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