使用 Nuxt UI Pro 更快构建。

一系列基于 Nuxt UI 构建的优质 Vue 组件、可组合项和实用工具。
这些响应式组件专注于结构和布局，旨在成为您下一个想法的完美构建块。

购买许可免费试用

Nuxt UI 让我能够在没有任何前期模型设计的情况下开发我的 SaaS。其组件的设计质量和出色的开发者体验（DX）意味着我能够为我的应用尝试多种不同的布局，直到找到最适合用户的用户体验（UX）。Nuxt UI 是我梦寐以求能亲手构建的 UI 工具包，而 Nuxt UI Pro 则让您在希望将 SaaS 推向更深层次时变得更加轻松。向团队致敬。

Benjamin Code

YouTuber 和创始人

更快地创建出色的 Vue 应用。

Nuxt UI Pro 包含了强大的功能，可帮助您以创纪录的速度构建现代化、高性能、无障碍且响应式的 Nuxt 应用。从预构建的 UI 部分到 Figma 设计套件，每一个细节都经过精心打造，旨在加速您的开发并提供精致的用户体验。

40+ 即用型部分
适用于落地页、文档、博客、仪表盘等的预构建 UI 组件——开箱即用。
自动深色模式
通过内置的深色模式开关无缝适应用户偏好——无需额外配置。
极速性能
针对 Nuxt 3 进行优化，具有最小的打包体积、闪电般的渲染速度和最佳的性能实践。
SEO 和无障碍功能就绪
构建时考虑到正确的语义化 HTML、结构化数据和无障碍性，以获得更好的排名和可用性。
完全可定制的 UI
使用 Tailwind CSS 和 Nuxt UI 的设计令牌修改颜色、字体、间距和布局，以匹配您的品牌标识。
支持 Nuxt Content
使用 Markdown 和 MDC 编写内容，轻松构建文档、博客和知识库。
仅限 Vue 模式
无需 Nuxt 即可享受 Nuxt UI Pro 的优势。将其无缝集成到您的 Vue 3 + Vite 项目中，轻松构建现代 UI。
内置国际化 (i18n)
通过内置的多语言和从右到左 (RTL) 布局支持，轻松实现网站本地化。
Figma 设计套件
将 Nuxt UI & UI Pro Figma UI 套件与您的开发工作流程相匹配，确保从设计到代码的快速过渡。

认识一下 Pro 组件。

使用 Nuxt UI Pro 的 50 多个组件和部分来构建您的下一个应用，从而减少您需要编写的代码量。

自由构建一切

Nuxt UI Pro 附带了一套广泛的高级组件，涵盖了各种用例。它们经过精心设计，可在不牺牲灵活性的情况下减少样板代码。

与 Nuxt UI 一样，您可以从 App Config 中更改任何组件的样式，或通过 ui prop 对其进行特定定制。
每个组件都利用了 Vue 插槽的强大功能，为您提供了自由构建一切的灵活性。
Nuxt UI Pro 组件旨在结构化您的内容，它们天生就是响应式的，并且能适应任何屏幕尺寸。

探索组件

app.vue

<script setup lang="ts">
const links = [
  { to: '/', label: 'Home' },
  { to: '/about', label: 'About' },
  { to: '/contact', label: 'Contact' }
]
</script>

<template>
  <UApp>
    <UHeader :links="links" />

    <UPageHero title="Hello World" />

    <UPageSection title="Features">
      <UPageGrid>
        <UPageCard title="First Card" />
        <UPageCard title="Second Card" />
        <UPageCard title="Third Card" />
      </UPageGrid>
    </UPageSection>

    <UFooter />
  </UApp>
</template>

显示数据的灵活性

尽管您可以使用任何您想要的数据源，但 Nuxt UI Pro 已与 Nuxt Content 完全集成，并在检测到该模块时提供附加功能。

Nuxt UI Pro 覆盖了 Nuxt Content 的 prose 组件，使其更出色，同时也添加了新的组件，如 Callout、CodeGroup、Field 等。
Nuxt UI Pro 附带了一个即用型命令面板组件。无需再设置 Algolia DocSearch。

Nuxt Content 集成

pages/[...slug].vue

<script setup lang="ts">
const route = useRoute()

const { data: page } = await useAsyncData(route.path, () => queryCollection('content').path(route.path).first())
</script>

<template>
  <UPage>
    <UPageHeader :title="page.title" :description="page.description" :links="page.links" />

    <UPageBody>
      <ContentRenderer v-if="page.body" :value="page" />
    </UPageBody>

    <template #right>
      <UContentToc :links="page.body.toc.links" />
    </template>
  </UPage>
</template>