简介

漂亮的排版组件和工具，用 Nuxt UI 来美化您的内容。

Nuxt UI 为 Prose 组件 带来了漂亮、一致的样式，该组件由@nuxtjs/mdc提供。Nuxt MDC 模块将您的 Markdown 转换为语义化的 Vue 组件，Nuxt UI 应用其设计系统，使您的内容自动适应您应用程序的主题。

有关 Nuxt Content 的安装和设置，请查看内容集成指南。

用法

由 Nuxt MDC 的 Prose 组件提供支持并由 Nuxt UI 样式化的排版系统，提供了多种渲染样式化内容的方法

  1. Markdown 渲染 - 使用 ContentRenderer 或 MDC 组件渲染带有自动 Prose 样式的 Markdown
  2. 直接 Vue 使用 - 直接在您的 Vue 模板中导入和使用 Prose 组件

使用 ContentRenderer

最简单的方法 - 当使用<ContentRenderer>组件时，您的 Markdown 会自动样式化

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

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

<template>
  <ContentRenderer :value="page" />
</template>
当您编写 Markdown 时，Nuxt MDC 会自动将每个元素映射到样式化的 Prose 组件
  • # 标题 → <ProseH1> (带有可访问的锚点链接)
  • **粗体** → <ProseStrong> (根据您的主题样式化)
  • `代码` → <ProseCode> (带有语法高亮)
  • ...所有其他 Markdown 语法都以其对应的 Prose 组件呈现，确保一致的设计和主题。

使用 MDC 组件

为了更好地控制 Markdown 渲染，请使用<MDC>组件时，您的 Markdown 会自动样式化

<script setup lang="ts">
const value = `# Hello World

Learn more about the **MDC** component in the [documentation](https://github.com/nuxt-modules/mdc).
`
</script>

<template>
  <MDC :value="value" />
</template>
当您需要以下情况时，请使用此方法：
  • 渲染来自外部源（如 API 或数据库）的 Markdown 内容
  • 将动态或自定义数据注入到您的 Markdown 中
  • 构建灵活、动态的内容系统
  • 安全地处理和显示用户生成的 Markdown

使用 Prose 组件

直接在 Vue 模板中使用 Prose 组件以获得最大控制

<template>
  <ProseTable>
    <ProseThead>
      <ProseTr>
        <ProseTh>Prop</ProseTh>
        <ProseTh>Default</ProseTh>
      </ProseTr>
    </ProseThead>
    <ProseTbody>
      <ProseTr>
        <ProseTd>
          <ProseCode>color</ProseCode>
        </ProseTd>
        <ProseTd>
          <ProseCode>neutral</ProseCode>
        </ProseTd>
      </ProseTr>
    </ProseTbody>
  </ProseTable>
</template>

MDC 语法

您可以使用以下方式在 Markdown 文件中包含 Vue 组件MDC 语法.

常规 Markdown，包含粗体和斜体文本。

使用 MDC 组件进行丰富的交互！

使用 pnpm add @nuxt/ui 进行安装

pnpm add @nuxt/ui

Regular markdown with **bold** and *italic* text.

::callout{icon="i-lucide-rocket" color="primary"}
Use MDC components for rich interactions!
::

::tabs

:::tabs-item{label="Installation"}
Use pnpm add @nuxt/ui to install
:::

:::tabs-item{label="Usage"}
Import components and use them in your templates
:::

::

::code-group

```bash [pnpm]
pnpm add @nuxt/ui
```

```bash [yarn]
yarn add @nuxt/ui
```

```bash [npm]
npm install @nuxt/ui
```

```bash [bun]
bun add @nuxt/ui
```

::

主题

在您的应用程序配置中覆盖任何 Prose 组件样式

app.config.ts
export default defineAppConfig({
  ui: {
    prose: {
      h1: {
        slots: {
          base: 'scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl'
        }
      },
      p: {
        base: 'leading-7 [&:not(:first-child)]:mt-6'
      }
    }
  }
})

标题和文本

美观的标题、段落、文本格式和链接，以实现最佳可读性。