把解析后的内容 AST 渲染为 Vue 节点，底层基于 @comark/vue。

ContentRenderer

把解析后的内容 AST 渲染为 Vue 节点，底层基于 @comark/vue。

import { ContentRenderer } from 'vike-vue-content/components/content-renderer'

Props

Prop	类型	默认值	说明
`tree`	`ContentBody`	必填	内容 AST（来自 `ContentEntry.body`）。
`components`	`ContentComponents`	`{}`	自定义节点 → Vue 组件的映射。
`data`	`ContentData`	`{}`	注入内容的绑定数据。

事件

事件	说明
`resolve`	内容异步渲染完成后触发（内部用 `<Suspense>`）。

用法

<script setup>
import { ContentRenderer } from 'vike-vue-content/components/content-renderer'
import { queryCollection } from 'vike-vue-content/query'

const page = await queryCollection('docs').path('/docs/getting-started').first()
</script>

<template>
  <ContentRenderer v-if="page" :tree="page.body" />
</template>

内置组件映射

ContentRenderer 默认预注册以下组件：

标签	组件	说明
`a`	`ProseA`	base 感知链接（自动拼接 base，外链自动新窗口打开）。
`pre`	`ProseCode`	带复制按钮和可选文件名头的代码块。
`code-group`	`CodeGroup`	标签页式代码块。
`code-preview`	`CodePreview`	带 `#source` 插槽的实时预览容器。

用户传入的 components 优先级更高，可覆盖以上任意组件。