<ContentQuery>

The fastest way to query and display your content.

The <ContentQuery> component fetches a document and gives access to it via a scoped slot.

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.

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

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.

Examples

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>