发布·  

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 组件（与 Nuxt Content 完全集成），美观地渲染 Markdown 并构建内容丰富的网站。
  • 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 is a free and open-source UI library for Nuxt applications. Create beautiful & responsive applications in minutes."
        :links="heroLinks"
      />

      <UPageSection
        title="The freedom to build anything"
        description="Nuxt UI ships with a comprehensive set of components that cover a wide range of use-cases. Carefully crafted to reduce boilerplate code without sacrificing flexibility."
        :features="features"
      />

      <UPageSection title="Pricing">
        <UPricingPlans :plans="plans" />
      </UPageSection>

      <UPageSection>
        <UPageCTA
          title="Start with Nuxt UI today!"
          description="Nuxt UI is a free and open-source UI library for Nuxt applications."
          variant="subtle"
          :links="ctaLinks"
        />
      </UPageSection>

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

从设计到代码，无缝衔接

一个成功的项目始于稳固的设计系统。在 v4 版本中，我们免费发布了完整的 Figma 套件，与整个组件库一一对应。

拥有超过 2,000 个组件变体和设计令牌，现在您拥有了一个单一的 Figma 入口，其中包含每个组件以及关于结构和用法的详细说明。设计师和开发者从同一个全面的源头开始工作，使协作无缝对接，并确保设计与实现完美匹配。

获取 Figma 套件 →

升级的开发者体验

除了新组件之外，v4 还为您的工作流程带来了重大改进。

轻松迁移

与从 v2 到 v3 的重大调整不同，迁移到 v4 非常简单。此版本专注于统一，而不是破坏性更新。大多数组件的工作方式完全相同，且您现有的代码将基本保持不变。

查看我们的迁移指南以获取完整的迁移指南。

精炼的文档

我们彻底重构了文档，使其更清晰、更直观。我们重新组织了布局，并将复杂的主题拆分为独立的页面，确保您能更快地找到所需信息。

我们的文档现在也完全支持 AI。它由我们全新的 模型上下文协议 (MCP) 服务器 提供支持，这使得像 Cursor 这样的 AI 工具可以直接访问组件文档和元数据。此外，我们还提供了 LLMs.txt 文件，这是一种结构化格式，使任何 AI 助手都能理解我们的组件、主题和最佳实践。您的 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 的支持，我们比以往任何时候都更兴奋地突破组件开发的边界。没有我们了不起的社区的支持，以及每一位帮助塑造 Nuxt UI 的贡献者，这一发布是不可能实现的。

我们迫不及待地想看到您的作品。UI 开发的未来是免费、开放且比以往任何时候都更加强大的。

准备好开始了吗？请查看文档并加入我们的Discord 社区与其他开发者交流，他们正在用 Nuxt UI 构建令人惊叹的事物。

← 返回博客
Nuxt 在领英上Nuxt on BlueskyNuxt 在 X 上