简介

Nuxt UI 是一个全面的 Vue 和 Nuxt 应用程序 UI 库，提供了一系列完全样式化和无障碍的组件。

什么是 Nuxt UI？

一个现代 UI 库，构建于Reka UI, Tailwind CSS和Tailwind Variants之上，可提供 100 多个生产就绪组件，用于构建美观且无障碍的应用程序。

开发者体验至上

直观的 API、出色的 TypeScript 支持、自动补全和全面的文档。

默认美观

开箱即用的现代、简洁设计，可在几分钟内适应的主题。

默认无障碍

符合 WAI-ARIA 标准，支持键盘导航、焦点管理和屏幕阅读器。

生产就绪

100 多个经过实战检验的组件，被数千个生产应用程序使用。

v4 中的新功能？

Nuxt UI v4 标志着一个重要的里程碑：Nuxt UI 和 Nuxt UI Pro 现已统一为一个完全开源且免费的库，包含 100 多个生产就绪组件和一个完整的 Figma 工具包。

从 v3 到 v4 的迁移将比从 v2 到 v3 更顺畅。在迁移指南中阅读更多内容。

如果您正在从 v2 迁移，可以在这份迁移指南中阅读更多内容。

核心技术

Reka UI

Nuxt UI 构建于Reka UI之上，作为组件的基础

  • WAI-ARIA 合规性：遵循WAI-ARIA 创作实践，具有正确的语义和角色
  • 键盘导航：对选项卡和对话框等复杂组件内置键盘支持
  • 焦点管理：智能焦点处理，根据用户交互移动焦点
  • 无障碍标签：抽象化，简化屏幕阅读器的控件标签

Tailwind CSS

Nuxt UI 集成了最新的Tailwind CSSv4，带来了显著改进

  • 构建速度快 5 倍：完整构建速度提高 5 倍，增量构建速度提高 100 倍以上
  • 统一工具链：内置导入处理、供应商前缀和语法转换
  • CSS 优先配置：直接在 CSS 中而不是 JavaScript 中自定义和扩展
  • 现代 Web 功能：容器查询、级联层、广色域颜色等

Tailwind Variants

Nuxt UI 利用了Tailwind Variants提供强大的主题系统

  • 动态样式：具有强大 API 的灵活组件变体
  • 类型安全：全面 TypeScript 支持，带自动补全
  • 冲突解决：高效合并冲突样式

主要特点

生态系统集成

Nuxt UI 与 Nuxt 生态系统集成，提供无缝的开发体验

  • 图标：访问 Iconify 中的 200,000+ 个图标
  • 字体：即插即用的 Web 字体优化和配置
  • 颜色模式：带自动检测的深色和浅色模式
  • 国际化：支持 50 多种语言的组件国际化
  • 内容：开箱即用的精美排版

Vue 兼容性

Nuxt UI 适用于任何 Vue 项目。只需将 Vite 和 Vue 插件添加到您的配置中

  • 自动导入：组件和可组合项自动导入并全局可用
  • 主题系统：全面的主题支持，可自定义颜色、大小、变体等
  • 开发者体验：完整的 TypeScript 支持，带有 IntelliSense 和自动补全
在Vue 安装指南中了解如何在 Vue 项目中安装和配置 Nuxt UI。

TypeScript 支持

Nuxt UI 提供全面的 TypeScript 集成，带来卓越的开发者体验

  • 自动补全：适用于所有组件的 props、插槽和事件
  • 泛型组件：使用Vue 泛型
  • 类型安全主题：在 app.config.ts 中
  • IntelliSense：贯穿您的整个代码库

常见问题

安装

了解如何在您的 Nuxt 应用程序中安装和配置 Nuxt UI。