Render Content

<ContentDoc />

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

By default it fetchs the current route ($route.path) but an explicit path can be passed to the component with the path prop.

Create a catch all route named pages/[...slug].vue and add 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 using useContentHead() section.

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

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

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

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

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