The fastest way to query and display your content.
The <ContentList>
component fetches a list of documents and allows you to render them by using slots
.
The fetching path defaults to the content root (/
).
An explicit path
can be given to the component.
path
: The path of the content to load from content source.String
'/'
query
: A query to be passed to queryContent()
.QueryBuilderParams
undefined
default
slot can be used to render the content via v-slot="{ list }"
syntax:
<template> <main> <ContentList path="/articles" v-slot="{ list }"> <div v-for="article in list" :key="article._path"> <h2>{{ article.title }}</h2> <p>{{ article.description }}</p> </div> </ContentList> </main></template>
not-found
slot can be used when no documents are matching the query:
<template> <main> <ContentList path="/articles" v-slot="{ list }"> <!-- ...default slot --> <template #not-found> <p>No articles found.</p> </template> </ContentList> </main></template>