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>