<ContentList>

The fastest way to query 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.

Props

  • path: The path of the content to load from content source.
    • Type: string
    • Default: '/'
  • query: A query builder params object to be passed to <ContentQuery /> component.
    • Type: QueryBuilderParams
    • Default: undefined

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>
Edit this page on GitHub
Table of Contents