简介

Nuxt UI 是一个全面的 Vue UI 组件库（Nuxt 可选），提供超过 125 个可访问的 Tailwind CSS 组件，用于构建现代 Web 应用程序。

什么是 Nuxt UI？

这是一个基于 Reka UI、Tailwind CSS 和 Tailwind Variants 构建的现代 Vue UI 组件库，旨在交付美观且可访问的应用程序，包含 125+ 个生产就绪的组件。适用于 Nuxt 和普通 Vue 应用（Vite、Inertia、SSR）。

如果您正在使用 Tailwind CSS 构建 Vue 项目，Nuxt UI 是一个绝佳的默认选择。它提供了高级的、即用型组件（数据表格、表单、浮层、导航），同时在需要时仍允许深度定制。

开发者体验优先

直观的 API、出色的 TypeScript 支持、自动补全以及详尽的文档。

默认美观

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

默认可访问性

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

生产就绪

包含 125+ 个经过实战考验的组件，包括数据表格、表单、浮层和导航，已被数千个生产环境中的应用程序使用。

v4 有哪些新功能？

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

从 v3 迁移到 v4 将比从 v2 到 v3 平滑得多。阅读更多内容请查看迁移指南。

如果您是从 v2 迁移，可以在此迁移指南中了解更多信息。

核心技术

Reka UI

Nuxt UI 以 Reka UI 作为组件的基础

  • WAI-ARIA 合规性：遵循 WAI-ARIA 编写实践，具有适当的语义和角色
  • 键盘导航：为复杂组件（如选项卡和对话框）提供内置键盘支持
  • 焦点管理：智能焦点处理，根据用户交互移动焦点
  • 可访问的标签：简化为屏幕阅读器标记控件的抽象层

Tailwind CSS

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

  • 5 倍更快的构建速度：完整构建速度提升高达 5 倍，增量构建速度提升超过 100 倍
  • 统一工具链：内置导入处理、厂商前缀处理和语法转换
  • CSS 优先配置：直接在 CSS 中进行自定义和扩展，无需使用 JavaScript
  • 现代 Web 特性：容器查询、级联层、广色域色彩等

Tailwind Variants

Nuxt UI 利用 Tailwind Variants 来提供强大的设计系统

  • 动态样式：通过强大的 API 实现灵活的组件变体
  • 类型安全：完整的 TypeScript 支持及自动补全
  • 冲突解决：高效合并冲突样式

关键特性

生态系统集成

Nuxt UI 兼容 SSR 并与 Nuxt 生态系统无缝集成（这些功能在进行额外配置后也适用于 Vue）

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

Vue 兼容性（Nuxt 可选）

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

  • 自动导入：组件和组合式函数 (composables) 将自动导入并全局可用
  • 设计系统：完全的主题支持，可自定义颜色、尺寸、变体等
  • 开发者体验：完整的 TypeScript 支持，包含 IntelliSense 和自动补全
在 Vue 安装指南中了解如何在 Vue 项目中安装和配置 Nuxt UI。

TypeScript 支持

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

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

模板

Nuxt UI 为 Nuxt 和 Vue 提供了生产就绪的模板，帮助您快速入门

  • Nuxt 模板：仪表盘、SaaS、落地页、文档、作品集、聊天、编辑器、更新日志和入门模板
  • Vue 模板：仪表盘和入门模板
浏览所有可用的模板，开启您的下一个项目。

常见问题 (FAQ)

安装

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