`<ContentDoc>`

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 }">
      <article>
        <h1>{{ doc.title }}</h1>
        <ContentRenderer :value="doc" />
      </article>
    </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>

Slots

pages/[...slug].vue

<template>
  <main>
    <ContentDoc>
      <template v-slot="{ doc }">
        <article>
          <h1>{{ doc.title }}</h1>
          <ContentRenderer :value="doc" />
        </article>
      </template>
      <template #not-found>
        <h1>Document not found</h1>
      </template>
    </ContentDoc>
  </main>
</template>

searchContent()

Takes your component from an AST to a wonderful template.