Nuxt UI V4 版本发布，同时宣布所有 Pro 组件免费开源！🚀🚀🚀前言 Nuxt UI v4版本发布，这一

前言

Nuxt UI v4版本发布，这一次更新将原本的 Pro 付费功能完全开源免费，

Nuxt UI v4 发布了

提供超过 110 个组件、 12 个模板和完整的 Figma 设计套件。

往期精彩推荐

正文

下面是更新的主要内容：

统一包的全面工具链

这次发布将 Nuxt UI 和 Nuxt UI Pro 统一为单一的开源包 @nuxt/ui，所有高级组件和模板现已免费开放，彻底降低了构建高质量 Vue/Nuxt 应用的门槛。

Nuxt UI v4 的核心覆盖了组件库、模板和内容渲染，兼容 Vue、Nuxt、Adonis 和 Laravel 框架：

一个典型的模板示例展示了其简洁性：

<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>

上面的代码渲染之后是这样的：

预览效果

Figma Kit 开源

v4 引入了免费的 Figma Kit，包含 2000+ 组件变体和设计令牌，可以确保设计和我们开发者从同一来源工作。

Figma Kit

技术上，它支持Figma的变量模式和组件嵌套，减少了设计-实现偏差，例如UButton的Figma变体直接对应Vue props（如variant="solid"）。

轻松迁移

与v2到v3的重大重构不同，v4聚焦统一而非破坏性变更。现有代码基本兼容，仅需更新少数 API

支持npx nuxi upgrade一键处理依赖。

文档与AI集成

文档站点重新设计为模块化布局，复杂主题拆分为独立页面，提升搜索效率。

另外，引入了 MCP 服务器，允许AI工具直接访问组件元数据和文档。

同时，提供LLMs.txt文件，结构化描述组件、主题和最佳实践，便于AI助手生成代码。

最后

Nuxt UI v4 通过统一开源、Figma 集成和 AI 优化，重新定义了 Vue/Nuxt UI 开发的标杆，让我们能以更低成本构建生产级应用！

今天的分享就这些了，感谢大家的阅读，如果文章中存在错误的地方欢迎指正！