1.content-doc.md

<ContentDoc>

The fastest way to query and display your content.

The <ContentDoc>{lang=html} component fetches and renders a single document.

An explicit path can be passed to the component with the path{lang=ts} prop. If not provided, the $route.path{lang=ts} will be used.

It uses <ContentRenderer>{lang=html} and <ContentQuery>{lang=html} under the hood.

Props

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

Slots

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

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

The not-found{lang=ts} 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{lang=ts} 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>

Examples

Default

<template>
  <main>
    <!-- Similar to <ContentDoc :path="$route.path" /> -->
    <ContentDoc />
  </main>
</template>

Explicit path

<template>
  <main>
    <ContentDoc path="/about" />
  </main>
</template>