Nuxt UI, la biblioteca de componentes intuitiva para aplicaciones Vue

Construir una aplicación Vue desde cero implica tomar decenas de decisiones antes de escribir una sola línea de lógica de negocio: qué biblioteca de componentes usar, cómo manejar la accesibilidad, si tu sistema de diseño escalará y qué tan estrechamente debe acoplarse a tu framework. Nuxt UI responde a la mayoría de esas preguntas antes incluso de abrir tu editor.

¿Qué es Nuxt UI?

Nuxt UI es una biblioteca de componentes Vue gratuita y de código abierto construida sobre tres tecnologías principales:

• Reka UI — primitivas accesibles headless que manejan la navegación por teclado, la gestión del foco y el soporte para lectores de pantalla de forma nativa
• Tailwind CSS — estilos basados en utilidades con un modelo de configuración CSS-first
• Tailwind Variants — una API type-safe para gestionar variantes de componentes y resolver conflictos de estilos de forma limpia

El resultado son más de 125 componentes listos para producción, accesibles por defecto, visualmente pulidos y fáciles de personalizar.

Una aclaración importante: a pesar del nombre, Nuxt UI no es exclusivo de Nuxt. Funciona igual de bien en cualquier proyecto Vue mediante un plugin de Vite. Si estás construyendo con Vue puro, Vue Router y Vite, la configuración solo requiere unas pocas líneas.

Cómo encaja Nuxt UI en el ecosistema Vue

Al evaluar una biblioteca de componentes Vue, la pregunta real no es “¿tiene suficientes componentes?”, sino “¿se adapta a cómo realmente desarrollo?”

Así se ubica Nuxt UI frente a alternativas comunes:

Si tu stack ya incluye Tailwind CSS y quieres componentes de alto nivel —tablas de datos, formularios, overlays, navegación— sin tener que construirlos tú mismo, Nuxt UI es la opción natural.

Primeros pasos: instalación

Para proyectos Nuxt, agrega el módulo a nuxt.config.ts:

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

Luego envuelve tu aplicación con UApp e importa los estilos en tu archivo CSS de entrada:

@import "tailwindcss";
@import "@nuxt/ui";

<!-- app.vue -->
<template>
  <UApp>
    <NuxtPage />
  </UApp>
</template>

Para proyectos Vue + Vite estándar, configura el plugin de Vite:

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [vue(), ui()]
})

Luego registra el plugin en main.ts e importa el mismo CSS. Los componentes y composables se auto-importan globalmente en ambas configuraciones.

Características clave que vale la pena conocer

Accesibilidad sin trabajo adicional. Como Nuxt UI se basa en Reka UI, los componentes complejos como modales, pestañas y dropdowns manejan los atributos ARIA, el atrapamiento del foco y las interacciones por teclado automáticamente. Aun así necesitas probarlos en contexto, pero la base es sólida.

TypeScript en todo el sistema. Cada prop, slot y evento de componente está tipado. El theming a través de app.config.ts es type-safe, y las props, slots y composables de los componentes están completamente tipados en toda la biblioteca.

Theming que no te complica la vida. Nuxt UI v4 utiliza un modelo de configuración CSS-first. La personalización de colores, tamaños y variantes ocurre en CSS o en app.config.ts, sin archivos de configuración JavaScript con los que lidiar.

Más de 125 componentes en 13 categorías, incluyendo grupos especializados para dashboards, interfaces de chat con IA, edición de texto enriquecido e integración con Nuxt Content — áreas donde la mayoría de las bibliotecas de componentes Vue con Tailwind CSS no ofrecen nada.

Cuándo Nuxt UI es la opción correcta

Nuxt UI tiene sentido cuando quieres:

• Componentes Tailwind-native que no requieren un sistema de design tokens separado
• Accesibilidad gestionada a nivel de primitivas, no añadida a posteriori
• Componentes UI para Nuxt 4 con soporte de primera clase para SSR, i18n y modo de color
• Una biblioteca gratuita con licencia MIT sin componentes detrás de un muro de pago (Nuxt UI Pro se fusionó con la biblioteca principal en la v4)

Es menos ideal si necesitas Material Design, prefieres copiar el código fuente de los componentes en tu repositorio (considera shadcn-vue en su lugar), o estás construyendo aplicaciones multiplataforma orientadas a móvil y escritorio (considera Quasar).

Conclusión

Nuxt UI elimina el coste de andamiaje que ralentiza el desarrollo Vue en sus primeras etapas. Con componentes accesibles, un sistema de diseño coherente y TypeScript integrado, puedes centrarte en lo que tu aplicación realmente hace en lugar de reconstruir primitivas.

Comienza con la documentación oficial o clona una de las plantillas listas para usar —Dashboard, SaaS, Landing o Starter— y tendrás algo funcionando en minutos.

Preguntas frecuentes

Gain Debugging Superpowers

Unleash the power of session replay to reproduce bugs, track slowdowns and uncover frustrations in your app. Get complete visibility into your frontend with OpenReplay — the most advanced open-source session replay tool for developers. Check our GitHub repo and join the thousands of developers in our community.