Nuxt UI v2.19 已发布！

一个 UI 库为
现代 Web 应用

Nuxt UI 通过其
为 Nuxt 设计的、全面且经过完全样式化和可自定义的 UI 组件集合，简化了创建令人惊叹且响应式的 Web 应用程序的过程。

开始

您对
UI 组件库

调色板

从您的 Tailwind CSS 调色板中选择主色和灰色。组件将根据相应样式。

完全可定制

在您的应用程序配置中更改任何组件的样式，或通过 ui 属性专门自定义它们。

图标

使用 Icon 组件或 icon 属性，从最流行的图标库中选择任何超过 10 万个图标。

浅色和深色

每个组件都考虑了深色模式。与 @nuxtjs/color-mode 开箱即用。

键盘快捷键

Nuxt UI 附带一套 Vue 可组合函数，方便您在应用程序中轻松处理键盘快捷键。

探索 40 多个组件

由一个很棒的社区构建和驱动

206K+

每月下载量

4K+

GitHub 星标

Benjamin Canac

@benjamincanac

Romain Hamel

@romhml

Neil Richter

@noook

升级到 Nuxt UI 专业版

Nuxt UI 专业版是一系列基于 Nuxt UI 构建的高级 Vue 组件，可在几分钟内创建精美且响应式的 Nuxt 应用程序。
它包括所有用于构建登录页面、文档、博客、仪表盘或整个 SaaS 产品的原语。

立即购买探索模板

构建任何事物的自由

Nuxt UI 专业版附带一组广泛的先进组件，涵盖各种用例。精心设计，减少样板代码，同时不牺牲灵活性。

完全可定制: 与 Nuxt UI 一样，您可以从您的应用程序配置中更改任何组件的样式，或通过 ui 属性专门自定义它们。
适用于所有内容的插槽: 每个组件都利用了 Vue 插槽的力量，让您能够灵活地构建任何东西。
响应式设计: Nuxt UI 专业版组件旨在构建您的内容，它们是响应式设计，可以适应任何屏幕尺寸。

探索组件

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

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

  <UMain>
    <ULandingHero title="Hello World" />

    <ULandingSection title="Features">
      <UPageGrid>
        <ULandingCard title="First Card" />
        <ULandingCard title="Second Card" />
        <ULandingCard title="Third Card" />
      </UPageGrid>
    </ULandingSection>
  </UMain>

  <UFooter />
</template>

控制数据的灵活性

虽然您可以使用任何所需的数据源，但 Nuxt UI 专业版与 Nuxt 内容完全集成，并在检测到该模块时提供额外的功能。

轻松编写 Markdown: Nuxt UI 专业版覆盖了 Nuxt 内容的散文组件，使其变得很棒，但也添加了新的组件，例如 Callout、CodeGroup、Field 等。
漂亮的排版样式: Tailwind CSS 排版插件已预先配置并设置样式，以匹配 Nuxt UI 组件和颜色。
开箱即用的全文搜索: Nuxt UI 专业版附带一个可立即使用的命令面板组件。无需再设置 Algolia DocSearch。

Nuxt 内容集成

pages/[...slug].vue
<script setup lang="ts">
const route = useRoute()

const { data: page } = await useAsyncData(route.path, () => queryContent(route.path).findOne())
</script>

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

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

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