介绍

漂亮的排版组件和实用程序，用Nuxt UI设计你的内容。

Nuxt UI为您的markdown内容提供了精美的样式Prose组件。无论您是使用库渲染markdown还是直接使用prose组件，Nuxt UI都会应用其设计系统，因此您的内容会自动适应应用程序的主题。

使用@nuxtjs/mdc、@nuxt/content或@comark/nuxt时，自动启用散文组件。

否则，请启用nuxt.config.ts中的prose选项：
nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  ui: {
    prose: true
  }
})
有关Nuxt Content的安装和设置，请查看Content integration指南。
要在Vue中使用prose组件，您需要在vite.config.ts中启用prose选项：
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      prose: true
    })
  ]
})

用法

有多种方法可以渲染样式化内容：

  1. Markdown rendering：使用ContentRenderer、MDC、Markdown或MarkdownDocument以自动散文样式呈现markdown
  2. Direct Vue usage：直接在Vue模板中导入和使用prose组件

有多种方法可以渲染样式化内容：

  1. Markdown rendering：使用Markdown或MarkdownDocument以自动散文样式呈现markdown
  2. Direct Vue usage：直接在Vue模板中导入和使用prose组件

使用ContentRenderer：badge{label="Nuxt only" color="warning" class="align-text-top"}

使用@nuxt/content时，使用<ContentRenderer>组件呈现您的收藏页面：

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>

带有MDC组件：badge{label="Nuxt only" color="warning" class="align-text-top"}

使用@nuxtjs/mdc或@nuxt/content时，请使用<MDC>组件来呈现markdown字符串：

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

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

<template>
  <MDC :value="value" />
</template>
@nuxtjs/mdc已被弃用，转而支持Comark。您现有的markdown文件是兼容的，无需更改内容。

带Markdown组件

Comark呈现markdown，内置流媒体支持。它在令牌到达时递增呈现令牌，使其成为AI聊天响应和任何其他动态markdown内容的理想选择。

<script setup lang="ts">
import shiki from '@comark/nuxt/plugins/shiki'

const plugins = [shiki()]

const markdown = ref('# Hello World\n\nThis is **streaming** markdown.')
</script>

<template>
  <Markdown :value="markdown" :plugins="plugins" />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Markdown } from '@comark/vue'
import shiki from '@comark/vue/plugins/shiki'

const plugins = [shiki()]

const markdown = ref('# Hello World\n\nThis is **streaming** markdown.')
</script>

<template>
  <Markdown :value="markdown" :plugins="plugins" />
</template>
shiki插件为代码块添加了语法高亮。当呈现增量到达的内容时使用:streaming属性，例如AI响应。要支持暗模式，请将以下CSS添加到样式表中：
main.css
html.dark .shiki span {
  color: var(--shiki-dark) !important;
  background-color: var(--shiki-dark-bg) !important;
  font-style: var(--shiki-dark-font-style) !important;
  font-weight: var(--shiki-dark-font-weight) !important;
  text-decoration: var(--shiki-dark-text-decoration) !important;
}
请参阅Chat组件，了解使用Comark渲染AI聊天消息的完整示例。

使用MarkdownDocument

使用<MarkdownDocument>组件来呈现预解析的MarkdownDocument，而无需将任何解析器或插件代码发送到浏览器。当解析发生在服务器上、在构建步骤中或通过API时，这很有用。

<script setup lang="ts">
const { data: tree } = await useFetch('/api/content')
</script>

<template>
  <MarkdownDocument v-if="tree" :value="tree" />
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { MarkdownDocument } from '@comark/vue'

const tree = ref()

onMounted(async () => {
  tree.value = await fetch('/api/content').then(r => r.json())
})
</script>

<template>
  <MarkdownDocument v-if="tree" :value="tree" />
</template>

带有散文组件

直接在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元素会自动映射到prose组件：# Heading变成<ProseH1>，**bold**变成<ProseStrong>，`code`变成<ProseCode>，等等。

MDC Syntax更进一步，允许您直接在markdown中使用Vue组件。它由Nuxt Content，Nuxt MDC和Comark支持。

带有bold和 italic 文本的常规标记。

使用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
```

::

Theme

在您的应用配置中删除任何散列组件样式：

app/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'
      }
    }
  }
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      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'
          }
        }
      }
    })
  ]
})

Headers and text

Beautifully styled headings, paragraphs, text formatting, and links for optimal readability.