---
title: "Nuxt UI v4"
description: "Nuxt UI v4 将 Nuxt UI 和 Nuxt UI Pro 统一为一个强大、完全免费的库。超过 110 个组件、12 个模板，以及一整套完善的 Figma 套件，全部可免费使用。"
canonical_url: "https://nuxt.zhcndoc.com/blog/nuxt-ui-v4"
---
# Nuxt UI v4

> Nuxt UI v4 将 Nuxt UI 和 Nuxt UI Pro 统一为一个强大、完全免费的库。超过 110 个组件、12 个模板，以及一整套完善的 Figma 套件，全部可免费使用。

今天，我们发布了 [**Nuxt UI v4**](https://ui.nuxt.com)，这是我们的组件库迈出的重要里程碑，树立了新的标准。此次发布将 Nuxt UI 和 Nuxt UI Pro 统一为一个强大且完全免费的开源库。

这标志着 Vue 和 Nuxt 生态系统的一个激动人心的新篇章，这一切都得益于 [NuxtLabs 加入 Vercel](https://nuxtlabs.com)。我们对开源社区的共同承诺使得从[简单按钮](https://ui.nuxt.com/docs/components/button)到最先进的[仪表板侧边栏](https://ui.nuxt.com/docs/components/dashboard-sidebar)的每一个组件都向所有人开放。

此前属于高级套餐的特性现在向所有用户免费开放。超过 100 个组件、进阶模块和[生产级模板](https://ui.nuxt.com/templates)现在统一在一个地方供你使用。

## 以更快的速度构建任何项目

Nuxt UI v4 让你轻松快速构建现代、精致的应用。无需从头开始，你就可以创建复杂界面，如落地页、定价页、文档、博客、作品集等。

这得益于 Nuxt UI v4 将所有必需的内容统一到一个 `@nuxt/ui` 包中：

- **110+ 组件：** 一个丰富的库，支持从简单网站到复杂应用的任意构建。
- **12 个免费模板：** 借助生产级模板，分钟内启动项目，包括[落地页](https://landing-template.nuxt.dev)、[SaaS](https://saas-template.nuxt.dev)、[仪表板](https://dashboard-template.nuxt.dev)、[文档站点](https://docs-template.nuxt.dev)、[作品集](https://portfolio-template.nuxt.dev)、[聊天应用](https://chat-template.nuxt.dev)、或[更新日志](https://changelog-template.nuxt.dev)。
- **丰富的内容与排版：** 通过高级 prose 组件，优雅渲染 Markdown，构建内容丰富的网站；完全兼容 Nuxt Content。
- **Vue 与 Nuxt 兼容性：** 适用于任意 Vue 或 Nuxt 项目，亦支持 [Adonis](https://github.com/nuxt-ui-templates/starter-adonis) 和 [Laravel](https://github.com/nuxt-ui-templates/starter-laravel)。

全部 Pro 功能现已开放。你可以使用之前仅限付费用户的强大组件，现全部免费。

::tabs{.gap-0}
  :::div{label="index.vue"}
  ```vue
    <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 是一款免费且开源的 Nuxt 应用 UI 库，能在几分钟内创建漂亮且响应迅速的应用。"
          :links="heroLinks"
        />

        <UPageSection
          title="构建任何东西的自由"
          description="Nuxt UI 配备了涵盖丰富使用场景的全面组件集。精心设计以减少样板代码同时不牺牲灵活性。"
          :features="features"
        />

        <UPageSection title="定价">
          <UPricingPlans :plans="plans" />
        </UPageSection>

        <UPageSection>
          <UPageCTA
            title="立即开始使用 Nuxt UI！"
            description="Nuxt UI 是一款免费且开源的 Nuxt 应用 UI 库。"
            variant="subtle"
            :links="ctaLinks"
          />
        </UPageSection>

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

  :::code-preview
  ```yaml [props]
  label: 预览
  class: '[&>div]:*:my-0 w-full'
  ui:
    preview: p-0
  ```
    ::::index-example
    ::::
  :::
::

## 设计到代码，流畅无缝

成功的项目始于坚实的设计系统。在 v4 版本中，我们免费发布了**完整的 Figma 设计套件**，完美映射了整个组件库。

拥有超过**2,000 个组件变体和设计标记**，你现在拥有一个 Figma 单一入口，其中包含每一个组件及其结构和使用的详细说明。设计师和开发者可基于同一个全面的资源协作，无缝配合，确保设计与实现完美契合。

::u-button
```yaml [props]
to: https://go.nuxt.com/figma-ui
target: _blank
icon: i-simple-icons-figma
label: 获取 Figma 套件 →
class: mb-4
```
::

::carousel
```yaml [props]
items:
  - /assets/blog/figma-kit/1.png
  - /assets/blog/figma-kit/2.png
  - /assets/blog/figma-kit/3.png
```
::

## 更优的开发者体验

除了新增组件，v4 还显著优化了你的开发流程。

### 轻松迁移

与 v2 到 v3 的大变动不同，升级到 v4 十分简单。此次发布聚焦于统一，而非破坏性变更。大多数组件用法保持一致，你现有的代码几乎无需调整。

参见我们的[迁移指南](https://ui.nuxt.com/getting-started/migration/v4)获取完整步骤。

### 精炼的文档

我们全面重构了文档，使其更加清晰直观。通过重新组织结构与拆分复杂主题为独立页面，你能更快找到需要的信息。

文档也全面支持 AI。它由我们新的\*\*[模型上下文协议（MCP）服务器](https://ui.nuxt.com/docs/getting-started/ai/mcp)**提供支持，允许 AI 工具如 Cursor 直接访问组件文档和元数据。同时，我们还提供**[`LLMs.txt` 文件](https://ui.nuxt.com/docs/getting-started/ai/llms-txt)\*\*，这是一种结构化格式，使任何 AI 助手都能理解我们的组件、主题及最佳实践。你的 AI 工具现在能够在编辑器内优先访问我们整个库。

### 智能时代的准备

我们的 AI 聊天组件现支持 **Vercel 的 AI SDK v5**。全新的 `Chat` 类和带有 `parts` 的消息格式确保兼容最新 AI SDK 改进，让你紧跟 AI 技术前沿。

## 致我们的 Pro 用户

我们要特别感谢所有支持 Nuxt UI Pro 的用户。你们的早期采用和反馈对 Nuxt UI 的发展至关重要。是你们帮助资助、维护和改进了项目，让我们能够取得这一里程碑，并将这些强大工具免费提供给整个社区。

感谢你们的支持，让这一刻成为可能。

## 立即开始构建

通过我们的免费模板创建新项目，快速入门 Nuxt UI v4：

::code-group
```bash [Starter]
npm create nuxt@latest -- -t ui
```

```bash [Landing]
npm create nuxt@latest -- -t github:nuxt-ui-templates/landing
```

```bash [Docs]
npm create nuxt@latest -- -t github:nuxt-ui-templates/docs
```

```bash [SaaS]
npm create nuxt@latest -- -t github:nuxt-ui-templates/saas
```

```bash [Dashboard]
npm create nuxt@latest -- -t github:nuxt-ui-templates/dashboard
```

```bash [Chat]
npm create nuxt@latest -- -t github:nuxt-ui-templates/chat
```

```bash [Portfolio]
npm create nuxt@latest -- -t github:nuxt-ui-templates/portfolio
```

```bash [Changelog]
npm create nuxt@latest -- -t github:nuxt-ui-templates/changelog
```
::

或将其集成到你的现有项目中：

```bash
npm install @nuxt/ui@latest
```

## 未来是开放的

凭借统一的代码库和 Vercel 的支持，我们比以往任何时候都更激动地推动组件开发的边界。没有我们了不起的社区和所有贡献者的支持，这次发布是不可能实现的。

我们期待看到你们创造的精彩作品。UI 开发的未来将更加自由、开放且强大。

---

*准备好开始了吗？查看[文档](https://ui.nuxt.com)，并加入我们的[Discord 社区](https://discord.nuxt.com)，与其他使用 Nuxt UI 构建精彩项目的开发者交流。*


## Sitemap

See the full [sitemap](https://nuxt.zhcndoc.com/sitemap.md) for all pages.