Components

Public components for parsed and inline Markdown.

The Nuxt module registers ContentRenderer and ContentRendererInline globally.

`<ContentRenderer>`

Render the Markdown body or excerpt from a parsed content document.

vue

<ContentRenderer :value="page" />

Prop	Type	Default	Purpose
`value`	`object`	`{}`	Full document, Markdown root, or object with `body`/`excerpt`
`tag`	`string`	`'div'`	Wrapper element
`excerpt`	`boolean`	`false`	Render `excerpt` instead of `body`
`prose`	`boolean`	runtime setting	Enable prose-component mappings
`unwrap`	`boolean \| string`	`false`	Remove matching wrapper tags
`class`	Vue class value	none	Class forwarded to the renderer

The default slot replaces normal rendering and receives the props plus inherited attributes. The empty slot is used when the selected body is absent, unsupported, or has no children:

vue

<ContentRenderer :value="page">
  <template #empty>
    <p>No content found.</p>
  </template>
</ContentRenderer>

Without an empty slot, unsupported values render nothing and produce a console warning. Setting excerpt without an excerpt also warns.

`<ContentRendererInline>`

Parse and render a Markdown string inline.

vue

<ContentRendererInline value="Read the **release notes**." />

Prop	Type	Default	Purpose
`value`	`string`	required	Markdown source
`tag`	`string`	`'span'`	Wrapper element
`unwrap`	`boolean \| string`	`'p'`	Remove matching wrapper tags after parsing
`prose`	`boolean`	runtime setting	Enable prose-component mappings
`components`	`object`	`{}`	Per-render component overrides

The inline renderer intentionally uses a fixed safe baseline: standard Markdown, tables, task lists, and GFM alerts are normalized and validated before rendering; comments are discarded. Build-time Comark plugins, syntax highlighting, footnotes, Math, Mermaid, custom MDC components, and markdown.tags mappings apply only to ingested content, not to inline strings.

components may replace the renderer for a tag already authorized by that fixed baseline, such as strong or img. It does not authorize a new tag, component, prop, directive, or binding. For application components in ingested Markdown and their safe allowlist, see MDC and Vue components.

Both renderers resolve a tag in three steps: the per-render components prop, then the application's registered components, then the bundled prose defaults. Registering a global ProseImg component therefore replaces the built-in image rendering, including its markdown.image mode.