Release·  

Nuxt UI v4

Nuxt UI v4 将 Nuxt UI 和 Nuxt UI Pro 统一成一个强大且完全免费的库。拥有超过 110 个组件，12 个模板，以及一套完整的 Figma 设计套件，所有这些均可免费使用。
Benjamin Canac

Benjamin Canac

@benjamincanac

Sébastien Chopin

Sébastien Chopin

@atinux

Hugo Richard

Hugo Richard

@hugorcd__

今天，我们发布了 Nuxt UI v4，这是我们的组件库迈出的重要里程碑，树立了新的标准。此次发布将 Nuxt UI 和 Nuxt UI Pro 统一为一个强大且完全免费的开源库。

这标志着 Vue 和 Nuxt 生态系统的一个激动人心的新篇章，这一切都得益于 NuxtLabs 加入 Vercel。我们对开源社区的共同承诺使得从简单按钮到最先进的仪表板侧边栏的每一个组件都向所有人开放。

此前属于高级套餐的特性现在向所有用户免费开放。超过 100 个组件、进阶模块和生产级模板现在统一在一个地方供你使用。

以更快的速度构建任何项目

Nuxt UI v4 让你轻松快速构建现代、精致的应用。无需从头开始，你就可以创建复杂界面，如落地页、定价页、文档、博客、作品集等。

这得益于 Nuxt UI v4 将所有必需的内容统一到一个 @nuxt/ui 包中：

  • 110+ 组件： 一个丰富的库，支持从简单网站到复杂应用的任意构建。
  • 12 个免费模板： 借助生产级模板，分钟内启动项目，包括落地页、SaaS、仪表板、文档站点、作品集、聊天应用、或更新日志。
  • 丰富的内容与排版： 通过高级 prose 组件，优雅渲染 Markdown，构建内容丰富的网站；完全兼容 Nuxt Content。
  • Vue 与 Nuxt 兼容性： 适用于任意 Vue 或 Nuxt 项目，亦支持 Adonis 和 Laravel。

全部 Pro 功能现已开放。你可以使用之前仅限付费用户的强大组件，现全部免费。

  <template>
    <UApp>
      <UHeader>
        <UNavigationMenu :items="navigation" />
        <template #right>
          <UColorModeButton />
          <UButton icon="i-simple-icons-github" />
        </template>
      </UHeader>

      <UPageHero
        title="Nuxt UI - Starter"
        description="Nuxt UI 是一款免费且开源的 Nuxt 应用 UI 库，能在几分钟内创建漂亮且响应迅速的应用。"
        :links="heroLinks"
      />

      <UPageSection
        title="构建任何东西的自由"
        description="Nuxt UI 配备了涵盖丰富使用场景的全面组件集。精心设计以减少样板代码同时不牺牲灵活性。"
        :features="features"
      />

      <UPageSection title="定价">
        <UPricingPlans :plans="plans" />
      </UPageSection>

      <UPageSection>
        <UPageCTA
          title="立即开始使用 Nuxt UI！"
          description="Nuxt UI 是一款免费且开源的 Nuxt 应用 UI 库。"
          variant="subtle"
          :links="ctaLinks"
        />
      </UPageSection>

      <UFooter :items="footerItems" />
    </UApp>
  </template>

设计到代码，流畅无缝

成功的项目始于坚实的设计系统。在 v4 版本中，我们免费发布了完整的 Figma 设计套件，完美映射了整个组件库。

拥有超过2,000 个组件变体和设计标记，你现在拥有一个 Figma 单一入口，其中包含每一个组件及其结构和使用的详细说明。设计师和开发者可基于同一个全面的资源协作，无缝配合，确保设计与实现完美契合。

获取 Figma 套件 →

更优的开发者体验

除了新增组件，v4 还显著优化了你的开发流程。

轻松迁移

与 v2 到 v3 的大变动不同，升级到 v4 十分简单。此次发布聚焦于统一，而非破坏性变更。大多数组件用法保持一致，你现有的代码几乎无需调整。

参见我们的迁移指南获取完整步骤。

精炼的文档

我们全面重构了文档，使其更加清晰直观。通过重新组织结构与拆分复杂主题为独立页面，你能更快找到需要的信息。

文档也全面支持 AI。它由我们新的**模型上下文协议（MCP）服务器提供支持，允许 AI 工具如 Cursor 直接访问组件文档和元数据。同时，我们还提供LLMs.txt 文件**，这是一种结构化格式，使任何 AI 助手都能理解我们的组件、主题及最佳实践。你的 AI 工具现在能够在编辑器内优先访问我们整个库。

智能时代的准备

我们的 AI 聊天组件现支持 Vercel 的 AI SDK v5。全新的 Chat 类和带有 parts 的消息格式确保兼容最新 AI SDK 改进，让你紧跟 AI 技术前沿。

致我们的 Pro 用户

我们要特别感谢所有支持 Nuxt UI Pro 的用户。你们的早期采用和反馈对 Nuxt UI 的发展至关重要。是你们帮助资助、维护和改进了项目，让我们能够取得这一里程碑，并将这些强大工具免费提供给整个社区。

感谢你们的支持，让这一刻成为可能。

立即开始构建

通过我们的免费模板创建新项目，快速入门 Nuxt UI v4：

npm create nuxt@latest -- -t ui

或将其集成到你的现有项目中：

npm install @nuxt/ui@latest

未来是开放的

凭借统一的代码库和 Vercel 的支持，我们比以往任何时候都更激动地推动组件开发的边界。没有我们了不起的社区和所有贡献者的支持，这次发布是不可能实现的。

我们期待看到你们创造的精彩作品。UI 开发的未来将更加自由、开放且强大。

准备好开始了吗？查看文档，并加入我们的Discord 社区，与其他使用 Nuxt UI 构建精彩项目的开发者交流。

← 返回博客
Nuxt on LinkedInNuxt on BlueskyNuxt on X