Skip to content

Latest commit

 

History

History
79 lines (66 loc) · 2.41 KB

4.content-query.md

File metadata and controls

79 lines (66 loc) · 2.41 KB
Raw

<ContentQuery>

The fastest way to query and display your content.

The <ContentQuery>{lang=html} component fetches a document and gives access to it via a scoped slot.

Props

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

Slots

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

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

The empty{lang=ts} slot can be used to display a default content if the body of the document is empty.

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