The fastest way to query and display your content.
The <ContentDoc>
component fetches and renders a single document.
An explicit path can be passed to the component with the path
prop. If not provided, the $route.path
will be used.
It uses <ContentRenderer>
and <ContentQuery>
under the hood.
tag
: The tag to use for the renderer element (if no default slot is provided).String
'div'
path
: The path of the content to load from content source.String
$route.path
excerpt
: Whether or not to render the excerpt.Boolean
false
query
: A query to be passed to queryContent()
.QueryBuilderParams
undefined
head
: Toggles the usage of useContentHead
.Boolean
true
The default
slot can be used to render the content via v-slot="{ data }"
syntax:
<template> <main> <ContentDoc v-slot="{ doc }"> <h1>{{ doc.title }}</h1> <ContentRenderer :value="doc" /> </ContentDoc> </main></template>
The not-found
slot can be used when no document is found:
<template> <main> <ContentDoc> <template #not-found> <h1>Document not found</h1> </template> </ContentDoc> </main></template>
The empty
slot can be used to display a default content before rendering the document.
<template> <main> <ContentDoc> <template #empty> <h1>Document is empty</h1> </template> </ContentDoc> </main></template>
<template> <main> <!-- Similar to <ContentDoc :path="$route.path" /> --> <ContentDoc /> </main></template>
<template> <main> <ContentDoc path="/about" /> </main></template>