发布·  

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 上