<ContentRenderer>

Takes your component from an AST to a wonderful template.

The <ContentRenderer> component renders a document coming from a query.

It will use <ContentRendererMarkdown> component to render .md file types.

Other types will currently be passed to default slot via v-slot="{ data }" or be rendered inside <pre /> tag.

Props

  • value: The document to render.
    • Type: ParsedContent
    • Default: {}
  • tag: The tag to use for the renderer element if it is used.
    • Type: String
    • Default: 'div'
  • excerpt: Whether or not to render the excerpt.
    • Type: Boolean
    • Default: false
  • components: The map of custom components to use for rendering. This prop will pass to markdown renderer and will not affect other file types.
    • Type: Object
    • Default: {}

Slots

The default slot can be used to render the content via v-slot="{ data }" syntax.

pages/[...slug.vue]
<script setup lang="ts">const { data } = await useAsyncData('page-data', () => queryContent('/hello').findOne())</script><template>  <main>    <ContentRenderer :value="data">      <h1>{{ data.title }}</h1>      <ContentRendererMarkdown :value="data" />    </ContentRenderer>  </main></template>

The empty slot can be used to display a default content when the document is empty:

pages/[...slug.vue]
<script setup lang="ts">const { data } = await useAsyncData('page-data', () => queryContent('/hello').findOne())</script><template>  <main>    <ContentRenderer :value="data">      <template #empty>        <p>No content found.</p>      </template>    </ContentRenderer>  </main></template>
Note that when you use default slot and <ContentRendererMarkdown> in your template you need to pass components to <ContentRendererMarkdown>.
pages/[...slug].vue
<script setup lang="ts">const { data } = await useAsyncData('page-data', () => queryContent('/hello').findOne())const components = {  p: 'CustomParagraph'}</script><template>  <main>    <ContentRenderer :value="data">      <h1>{{ data.title }}</h1>      <ContentRendererMarkdown :value="data" :components="components" />    </ContentRenderer>  </main></template>
Table of Contents