Nuxt UI: conectar la biblioteca de componentes en v4 y hacer que un Agent trabaje según AGENTS.md

Para quién

Si haces una interfaz Nuxt y quieres UI Vue lista, en vez de armar componentes accesibles desde cero, este repositorio encaja mejor. Junta Reka UI, Tailwind CSS y Tailwind Variants para interfaces complejas, accesibles y de alto rendimiento. Los upstreams relacionados son

https://reka-ui.com/

https://tailwindcss.com/

https://www.tailwind-variants.org/

Necesitas un proyecto Nuxt que pueda cambiar nuxt.config y aceptas instalar dependencias con pnpm. Quien solo quiere que un agente de código ayude a cambiar componentes, temas o pruebas debe leer primero el AGENTS.md del repositorio. No escribe un producto Agent concreto como único objeto soportado; solo dice que lo recogerán automáticamente all AI coding agents.

Completa el primer intento en 3 minutos

El comando oficial de instalación aparece en la página como este:

pnpm add @nuxt/ui tailwindcss

Esto cambia dependencias del proyecto; no es una mirada de solo lectura. Confirma primero que el directorio actual es tu aplicación Nuxt y que esta máquina tiene pnpm, luego ejecuta. Tras instalar, escribe el módulo en la configuración. El extracto da:

export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  css: ['~/assets/css/main.css']
})

Exige que exista la entrada CSS ~/assets/css/main.css, pero no escribe el contenido de ese archivo. No inventes @import ni el uso de componentes. Señal de éxito: la dependencia está instalada, modules muestra @nuxt/ui y la aplicación arranca como ya lo haces sin error por faltar este módulo. Si el Agent empieza a añadir ejemplos de botones que no aparecen en el extracto o a cambiar tokens de tema, para primero.

Comprobación de menor riesgo: abre

https://github.com/nuxt/ui/blob/v4/AGENTS.md

Haz que el Agent solo explique la estructura de componentes o las convenciones de tema, sin cambiar archivos aún.

Casos de uso

Caso 1: Conectar v4 en una aplicación Nuxt. Instala @nuxt/ui y tailwindcss con el comando pnpm de arriba, luego registra el módulo @nuxt/ui y apunta a ~/assets/css/main.css. La página no escribe equivalentes npm/yarn ni cómo importar el primer componente en un archivo único Vue. Así que solo puedes confirmar estos dos pasos: dependencia y registro del módulo. Qué escribir en el archivo CSS y qué componente poner en una página quedan fuera de este extracto; debes consultar docs o código fuente locales que ya tengas, y no fingir que este texto ya los dio.

Caso 2: Hacer que un agente de código trabaje según las normas del repositorio. AGENTS.md da guía de contribución a asistentes de IA, cubre estructura de componentes, patrones de tema, convenciones de prueba e indicaciones de docs, y se recoge automáticamente. La tarea debe ser una comparación de solo lectura, por ejemplo «según AGENTS.md, comprueba si la estructura/tema/pruebas de este componente se desvían». No escribe comandos de prueba concretos ni cómo publicar un sitio de docs. Así que la primera vez no dejes que el Agent reescriba docs en lote ni añada archivos de prueba; primero que señale los párrafos de apoyo y las rutas que cambiaría.

Límites de uso

Lo que miras ahora es la rama v4. Nuxt UI v3 está en

https://github.com/nuxt/ui/tree/v3

v2 en

https://github.com/nuxt/ui/tree/v2

No apliques a v4 nombres de módulo, directorios o escritura de tema de ramas viejas. La página no escribe una tabla de migración de v4 a v3.

El camino de instalación es pnpm add @nuxt/ui tailwindcss. No pongas al lado otro comando de gestor de paquetes. Reka UI y Tailwind Variants están escritos como fuentes de capacidad, no como segundo instalador.

La primera vez, párate en instalar dependencias, registrar el módulo o solo leer AGENTS.md. Cualquier cambio de código fuente de componentes, pruebas añadidas, tema o reescritura de la entrada CSS debe hacer que el Agent repita primero los archivos que cambiará; tú confirmas y luego sigues.