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

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

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

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