简介

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

什么是 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 多个图标
  • 字体：即插即用的网络字体优化和配置
  • 颜色模式：带有自动检测的深色和浅色模式
  • 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。