Components
<ContentList>
The fastest way to query your content with a component.
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.
pages/index.vue
<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>
Props
path: The path of the content to load from content source.- Type:
string - Default:
'/'
- Type:
query: A query builder params object to be passed to<ContentQuery />component.- Type:
QueryBuilderParams - Default:
undefined
- Type:
Slots
default slot can be used to render the content via v-slot="{ list }" syntax:
pages/index.vue
<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:
pages/index.vue
<template>
<main>
<ContentList path="/articles">
<template #default="{ list }">
<!-- ...default slot -->
</template>
<template #not-found>
<p>No articles found.</p>
</template>
</ContentList>
</main>
</template>
Query example
pages/index.vue
<script setup lang="ts">
import type { QueryBuilderParams } from '@nuxt/content/dist/runtime/types'
const query: QueryBuilderParams = { path: '/articles', where: [{ layout: 'article' }], limit: 5, sort: [{ date: -1 }] }
</script>
<template>
<main>
<ContentList :query="query" v-slot="{ list }">
<div v-for="article in list" :key="article._path">
<h2>{{ article.title }}</h2>
<p>{{ article.description }}</p>
</div>
</ContentList>
</main>
</template>