instalación

El template
Aprenda a instalar y configurar la interfaz de usuario de Nuxt en su aplicación Nuxt.

Configuración

Añadir a un proyecto de Nuxt

Instalar el paquete Nuxt UI

pnpm add @nuxt/ui tailwindcss

Añadir el módulo de interfaz de usuario de Nuxt en su nuxt.config.ts

nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/ui']
})
No hay necesidad de añadir @nuxt/icon, @nuxt/fonts o @nuxtjs/color-mode a su matriz modules ya que Nuxt UI los registra automáticamente.Puede configurar estos módulos en su nuxt.config.ts utilizando las teclas icon, fonts y colorMode.

Importe Tailwind CSS y Nuxt UI en su CSS

@import "tailwindcss";
@import "@nuxt/ui";
Cuando se utiliza Nuxt Layers, el módulo genera automáticamente directivas xph044 para cada directorio de capa, asegurando que Tailwind CSS escanee todos los archivos fuente de capa para clases de utilidad.
Se recomienda instalar la extensión Tailwind CSS IntelliSense para VSCode y añadir los siguientes ajustes:
.vscode/settings.json
{
  "files.associations": {
    "*.css": "tailwindcss"
  },
  "editor.quickSuggestions": {
    "strings": "on"
  },
  "tailwindCSS.classAttributes": ["class", "ui"],
  "tailwindCSS.classFunctions": ["defineAppConfig"]
}

Envuelva su aplicación con el componente de aplicación

app.vue
<template>
  <UApp>
    <NuxtPage />
  </UApp>
</template>
El componente App configura la configuración global y es necesario para Toast, Tooltip y **superposiciones programáticas **.

Use una plantilla de Nuxt

Comience con uno de nuestros plantillas oficiales x usando el botón Use this template en GitHub o la CLI:

npm create nuxt@latest -- -t ui

Starter

Una plantilla mínima para empezar con Nuxt UI.

Landing

Una plantilla de página de destino moderna impulsada por Nuxt Content.

Docs

Una plantilla de documentación impulsada por Nuxt Content.

SaaS

Una plantilla SaaS con aterrizaje, precios, documentos y blog impulsado por Nuxt Content.

Dashboard

Una plantilla de tablero con diseño de varias columnas para crear interfaces de administración sofisticadas.

Chat

Una plantilla de chatbot de IA para construir su propio chatbot impulsado por Vercel AI SDK.

Portfolio

Una plantilla de portafolio elegante para mostrar su trabajo, habilidades y blog impulsado por Nuxt Content.

Changelog

Una plantilla de registro de cambios para mostrar las notas de lanzamiento de su repositorio de GitHub impulsado por Comark.

Editor

Una plantilla de editor de texto enriquecido impulsada por TipTap con soporte para tipos de contenido markdown, HTML y JSON.

Calendar

Una plantilla inspirada en el calendario de Apple con vistas de día, semana y mes, arrastrar y soltar y actualizaciones optimistas.

Xph190xOpciones

Puede personalizar la interfaz de usuario de Nuxt proporcionando opciones en su nuxt.config.ts.

xprefix (Edición española)

Utilice la opción prefix para cambiar el prefijo de los componentes.

  • xDefault: U por defecto
nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  css: ['~/assets/css/main.css'],
  ui: {
    prefix: 'Nuxt'
  }
})

xfonts

Utilice la opción fonts para activar o desactivar el módulo @nuxt/fonts.

  • Default: true (en inglés)
nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  css: ['~/assets/css/main.css'],
  ui: {
    fonts: false
  }
})

xcolorMode

Utilice la opción colorMode para activar o desactivar el módulo @nuxt/color-mode.

  • Default: truex{lang="ts-type"} (en inglés)
nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  css: ['~/assets/css/main.css'],
  ui: {
    colorMode: false
  }
})

xtheme.colors (Edición española)

Utilice la opción theme.colors para definir los alias de color dinámicos utilizados para generar el tema de los componentes.

  • Default: ['primary', 'secondary', 'success', 'info', 'warning', 'error'] por defecto
nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  css: ['~/assets/css/main.css'],
  ui: {
    theme: {
      colors: ['primary', 'error']
    }
  }
})
Cada alias genera un conjunto completo de tonos y variantes --ui-color-* en los temas de componentes que tienen variantes de color, ya sea que la aplicación lo use o no. Recorte la lista a los alias que realmente usa y conserve error si usa formularios, ya que los estilos de validación dependen de él.
Obtenga más información sobre la personalización del color y la tematización en la sección Tema.

xtheme.transitions (Edición española)

Utilice la opción theme.transitions para habilitar o deshabilitar las transiciones en los componentes.

  • Default: true por defecto
nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  css: ['~/assets/css/main.css'],
  ui: {
    theme: {
      transitions: false
    }
  }
})
Esta opción agrega la clase transition-colors a los componentes con estados activos o estacionarios.

xtheme.unstyled: badge{label="4.9+" class="align-text-top"}

Utilice la opción theme.unstyled para eliminar todas las clases de tema predeterminadas de los componentes, manteniendo solo su estructura y las clases que proporcione a través de class, ui o app.config.ui.

  • Default: falsex{lang="ts-type"} por defecto
nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  css: ['~/assets/css/main.css'],
  ui: {
    theme: {
      unstyled: true
    }
  }
})
Esto elimina también las clases structural (posicionamiento, transiciones, flex/grid), no solo las cosméticas.Los componentes pesados en la disposición como Modal, Drawer o Calendar necesitarán que vuelva a suministrar su diseño, similar al modo sin estilo de PrimeVue.

Xph310xxtheme.defaultVariants (Edición española)

Utilice la opción theme.defaultVariants para anular las variantes color y size predeterminadas para los componentes.

Sólo los valores predeterminados que son exactamente primary o md se sustituyen, por lo que Avatar mantiene color: 'neutral' y Separator mantiene size: 'xs'.

  • Default: { color: 'primary', size: 'md' } (en inglés)
nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  css: ['~/assets/css/main.css'],
  ui: {
    theme: {
      defaultVariants: {
        color: 'neutral',
        size: 'sm'
      }
    }
  }
})

xtheme.prefix y badge{label="4.2+" class="align-text-top"}

Utilice la opción theme.prefix para configurar el mismo prefijo que estableció en su importación de Tailwind CSS. Esto garantiza que los componentes de la interfaz de usuario de Nuxt utilicen las clases de utilidad y las variables CSS prefijadas correctas.

export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  css: ['~/assets/css/main.css'],
  ui: {
    theme: {
      prefix: 'tw'
    }
  }
})
Es posible que tenga que habilitar fonts.processCSSVariables para usar la opción de prefijo con el módulo @nuxt/fonts:
nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  css: ['~/assets/css/main.css'],
  ui: {
    theme: {
      prefix: 'tw'
    }
  },
  fonts: {
    processCSSVariables: true
  }
})

Esto prefijará automáticamente todas las clases de utilidad Tailwind y las variables CSS en los temas de componentes de interfaz de usuario de Nuxt:

<!-- Without prefix -->
<button class="px-2 py-1 text-xs hover:bg-primary/75">Button</button>

<!-- With prefix: tw -->
<button class="tw:px-2 tw:py-1 tw:text-xs tw:hover:bg-primary/75">Button</button>
Obtenga más información sobre el uso de un prefijo en la documentación de Tailwind CSS.

xprose

Utilice la opción prose para forzar la importación de los componentes de Nuxt UI Prose incluso si no está instalado @nuxtjs/mdc, @nuxt/content o @comark/nuxt.

  • Default: false (en inglés)
nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  css: ['~/assets/css/main.css'],
  ui: {
    prose: true
  }
})

mdc: badge{label="Deprecated" color="warning" class="align-text-top"} (en inglés)

En su lugar, utilice la opción prose.

xcontent

Utilice la opción content para forzar la importación de los componentes de prosa y contenido de la interfaz de usuario de Nuxt, incluso si no está instalado @nuxt/content.

  • Default: false (en inglés)
nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  css: ['~/assets/css/main.css'],
  ui: {
    content: true
  }
})

xexperimental.componentDetection: badge{label="4.1+" class="align-text-top"}

Utilice la opción experimental.componentDetection para habilitar la detección automática de componentes para el tree-shaking. Esta función escanea su código fuente para detectar qué componentes se utilizan realmente y solo genera el CSS necesario para esos componentes (incluidas sus dependencias).

  • Default: false (en español) Tipo de teléfono: boolean | string[]

**Habilitar la detección automática: **

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

** Incluye componentes adicionales para uso dinámico: **

nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  css: ['~/assets/css/main.css'],
  ui: {
    experimental: {
      componentDetection: ['Modal', 'DropdownMenu', 'Popover']
    }
  }
})
Cuando se proporciona una matriz de nombres de componentes, se habilita la detección automática y se garantiza que estos componentes (junto con sus dependencias) se incluirán. Esto es útil para componentes dinámicos como <component :is="..." /> que no se pueden analizar estáticamente.

Liberaciones continuas

La interfaz de usuario de Nuxt utiliza pkg.pr.new para versiones de vista previa continuas, proporcionando a los desarrolladores acceso instantáneo a las últimas funciones y correcciones de errores sin esperar a versiones oficiales.

Se crean versiones de vista previa automáticas para todos los commits y PRs de la rama v4.Utilízalos reemplazando la versión de tu paquete con el hash de commit o número de PR específico.

package.json
{
  "dependencies": {
-   "@nuxt/ui": "^4.0.0",
+   "@nuxt/ui": "https://pkg.pr.new/@nuxt/ui@4c96909",
  }
}
pkg.pr.new comentará automáticamente los PR con la URL de instalación, lo que facilita la prueba de cambios.

Introduction

Nuxt UI is a comprehensive Vue UI component library (Nuxt optional), offering 125+ accessible, Tailwind CSS components for building modern web applications.

Migration

A comprehensive guide to migrate your application from Nuxt UI v3 to Nuxt UI v4.