The <ContentQuery> is a renderless component shortening the access to queryContent().

<!-- Similar to <ContentDoc :path="$route.path" /> -->
<template>
  <main>
    <ContentQuery :path="$route.path" find="one" v-slot="{ data }">
      <ContentRenderer :value="data" />
    </ContentQuery>
  </main>
</template>

Props

• path: The path of the content to load from content source.
  • Type: string
  • Default: undefined
• only: Select a subset of fields from an array of keys.
  • Type: string[]
  • Default: undefined
• without: Remove a subset of fields from an array of keys.
  • Type: string[]
  • Default: undefined
• where: Filter results with a where clause definition.
  • Type: { [key: string]: any }
  • Default: undefined
• sort: Sort results with a sort clause definition.
  • Type: SortParams
  • Default: undefined
• limit: Limit the amount of results.
  • Type: number
  • Default: undefined
• skip: Skip an amount of results.
  • Type: number
  • Default: undefined
• locale: Filter contents based on a locale.
  • Type: string
  • Default: undefined
• find: The type of query to be made.
  • Type: string
  • Values: 'one' or 'surround' or undefined
  • Default: .find() will be used if nothing is specified

Slots

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

The empty slot can be used to display a default content if the body of the document is empty.

The not-found slot can be used to display a default content before rendering the document.

Where clause

<template>
  <main>
    <ContentQuery path="/about/authors" :where="{ type: 'csv' }">
      <template #default="{ data }">
        <ul>
          <li v-for="author of data" :key="author.name">
            {{ author.name }}
          </li>
        </ul>
      </template>
      <template #not-found>
        <p>No authors found.</p>
      </template>
    </ContentQuery>
  </main>
</template>