1.rendering.md

title	description
Rendering	The <ContentDoc> and <ContentRenderer> components render the body of a Markdown document in a rich-text format.

Rendering Content

Nuxt Content provides 2 components to render Markdown content in a rich-text format, applying HTML tags (Prose) and displaying Vue components (MDC).

• The <ContentDoc> component accepts an optional path prop to fetch the content/ directory.
• The <ContentRenderer> component renders a Markdown document returned by queryContent().

::alert <ContentDoc> and <ContentRenderer /> components are auto-imported so any component or page can use it. ::

<ContentDoc />

The <ContentDoc> component fetches a document and renders it in a rich-text format.

The fetching endpoint defaults to the current route ($route.path). An explicit path can be passed to the component with the path props.

Create a catch all route named pages/[...slug].vue and the component:

<template>
  <main>
    <ContentDoc />
  </main>
</template>

It will fetch the document corresponding to the $route.path and render it. It will also handle the head management so you are ready to go, see the front-matter section.

You can use the <ContentDoc> component to render a specific document by specifying the path property:

<template>
  <main>
    <ContentDoc path="/about" />
  </main>
</template>

Not that no head management will be made when the path is specified.

Take a look at the Hello world example to see it in action.

::alert Head over to the API section to see the complete API of <ContentDoc>. ::

<ContentRenderer />

The <ContentRenderer> component renders the body of a Markdown document returned by queryContent() in a rich-text format. It fallbacks to rendering the content in a <pre>{lang="html"} tag if the content is not Markdown (:icon{name="fa-brands:github" class="inline-block w-4"} source code).

<ContentRenderer> accepts a value prop containing the data.

<script setup>
const { data } = await useAsyncData('hello', () => queryContent('/hello').findOne())
</script>

<template>
  <ContentRenderer :value="data" />
</template>

::alert Head over to the API section to see the complete API of <ContentRenderer>. ::