发布·  

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, 仪表盘, 文档站点, 作品集, 聊天应用程序或更新日志.
  • 丰富内容和排版： 使用我们与 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 开发的最前沿。

感谢我们的专业版用户

我们要特别感谢所有支持 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 上