Rendering

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


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().
<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:

pages/[...slug].vue
<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:

app.vue
<template>  <main>    <ContentDoc path="/about" />  </main></template>

Note 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.

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> tag if the content is not Markdown ( source code).

<ContentRenderer> accepts a value prop containing the data.

app.vue
<script setup>const { data } = await useAsyncData('hello', () => queryContent('/hello').findOne())</script><template>  <ContentRenderer :value="data" /></template>
Head over to the API section to see the complete API of <ContentRenderer>.