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.
value
: The document to render.ParsedContent
{}
tag
: The tag to use for the renderer element if it is used.String
'div'
excerpt
: Whether or not to render the excerpt.Boolean
false
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>