How to fetch all nested markdown files in Nuxt content?

Question

I'm trying to fetch for each A, B, C category a different folder in my content folder.

The best way I've managed to do that is using v-for and some arrays list in order to have my category list at the same place.
This array works with slots that generate a new Item for each new element:

 <div v-for="accordion in accordions" :key="accordion.title" class="l">
      <Item>
        <template #title>
          {{ accordion.title }}
        </template>

        <template #content>
          <div>{{ accordion.text }}</div>
        </template>
      </Item>
    </div>
  </div>

I have this to fetch my articles:

  async asyncData ({ $content }) {
    const articles = await $content('', { deep: true })
      .only(['title', 'description', 'img', 'slug', 'cat'])
      .sortBy('createdAt', 'asc')
      .fetch()

    return { articles }
  }, // this fetch all of my articles, which is nice

Now, in the accordions, I would like to do something similar to this: (or find a way to pass a .where({ cat: 'A' })...)

 accordions: [
        {
          title: 'A',
          text: const products = await this.$content('text').where({ 'articles.cat': { $contains: 'A' } }).fetch()
        },
        {
          title: 'B',
          text: const products = await this.$content('text').where({ 'articles.cat': { $contains: 'B' } }).fetch()
        },
        {
          title: 'C',
          text: const products = await this.$content('text').where({ 'articles.cat': { $contains: 'C' } }).fetch()
        }
      ],

How can I manage to instead of hardcoded text, have my articles from my content folder?

kissu · Accepted Answer · 2022-08-21 19:45:43Z

1

This gives a nice result (with some random .md files but the same structure as yours).

<template>
  <pre>{{ articles }}</pre>
</template>

<script>
export default {
  async asyncData ({ $content }) {
    const articles = await $content('', { deep: true })
      .only(['title', 'description', 'img', 'slug'])
      .sortBy('createdAt', 'asc')
      .fetch()

    return { articles }
  }
}
</script>

Official source: https://github.com/nuxt/content/issues/750#issuecomment-774495039

The result displayed being

edited Aug 21, 2022 at 19:45

answered Aug 21, 2022 at 14:06

kissu

47.3k16 gold badges94 silver badges196 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Aurore Over a year ago

This works as intented as it displays a list of all my posts, which is nice. I've made an edit to my original post in order to clarify what I was trying to make!

Collectives™ on Stack Overflow

How to fetch all nested markdown files in Nuxt content?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related