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="simple: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在 Bluesky 上分享 Nuxt在 X 上分享 Nuxt