<ContentDoc>

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.

Props

  • tag: The tag to use for the renderer element (if no default slot is provided).
    • Type: String
    • Default: 'div'
  • path: The path of the content to load from content source.
    • Type: String
    • Default: $route.path
  • excerpt: Whether or not to render the excerpt.
    • Type: Boolean
    • Default: false
  • query: A query to be passed to queryContent().
    • Type: QueryBuilderParams
    • Default: undefined
  • head: Toggles the usage of useContentHead.
    • Type: Boolean
    • Default: true

Slots

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

pages/dataviz.vue
<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:

pages/dataviz.vue
<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.

pages/dataviz.vue
<template>  <main>    <ContentDoc>      <template #empty>        <h1>Document is empty</h1>      </template>    </ContentDoc>  </main></template>

Examples

Default

pages/[...slug.vue]
<template>  <main>    <!-- Similar to <ContentDoc :path="$route.path" /> -->    <ContentDoc />  </main></template>

Explicit path

app.vue
<template>  <main>    <ContentDoc path="/about" />  </main></template>