简介

Nuxt UI 是一个全面的 Vue 和 Nuxt 应用程序 UI 库，提供了一系列完全风格化和可访问的组件。

什么是 Nuxt UI？

一个建立在Reka UI, Tailwind CSS和Tailwind Variants之上的现代 UI 库，拥有 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 多个图标
  • 字体：即插即用的网络字体优化和配置
  • 颜色模式：带自动检测的深色和浅色模式
  • i18n：用 50 多种语言国际化您的组件
  • 内容：开箱即用的精美排版

Vue 兼容性

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

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

TypeScript 支持

Nuxt UI 提供全面的 TypeScript 集成，以实现卓越的开发者体验

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

常见问题

安装

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