<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: Array<String>
    • Default: undefined
  • without: Remove a subset of fields from an array of keys.
    • Type: Array<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.

pages/[...slug.vue]
<!-- Similar to <ContentDoc :path="$route.path" /> --><template>  <main>    <ContentQuery :path="$route.path" 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

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