2.content-list.md

<ContentList>

The fastest way to query your content.

The <ContentList>{lang=html} 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{lang=ts} can be given to the component.

Props

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

Slots

default{lang=ts} slot can be used to render the content via v-slot="{ list }"{lang=html} 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{lang=ts} slot can be used when no documents are matching the query:

<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

<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>