loading only some markdown files in the content folder from pages folder

[xarthurx]

I'm building a website with nuxt3.

While some of the pages are in .md, some are in .vue.
After reading the documentation, it still confused me a bit how to combine pages folder and content folder together.

Say, the folder structure of my website is:

/ 
- /content
  - /content/posts
  - /content/projects
  - /content/projects/p1
  - /content/projects/p2
- /pages
  - /pages/posts
    - /pages/posts/index.vue    <--- read all posts title and create links to the individual posts
  - /pages/proj
    - - /pages/proj/index.vue    <--- read all projects folder (p1, p2), show a summary of all projects with info from the "p1", "p2" folder.

Question:

1. How do I setup the <ContentDoc> so that each index.vue only reads the corresponding folder? I tried <ContentDoc path="/content/posts" />, but it doesn't work.
2. Is it possible to create separate component that is shown only to the .md generated pages (e.g. ToC)? If yes, what is the suggested file structure? (load components in index.vue and also load the md file as components?

[nobkd]

I think, that you're looking for the <ContentList> component.

Here's a possible example for how I understood your structure.
Note, that this project is in doc-driven mode, so there are no app.vue or pages/[...slug].vue files.

https://stackblitz.com/edit/github-fz8dam?file=pages%2Fposts%2Findex.vue,pages%2Fprojects%2Findex.vue,pages%2Findex.vue

---

Note
If you have content/posts/index.md and pages/posts/index.vue the one from the content directory is preferred and used over the one from the pages directory.

If I misunderstood your problem, or you have further questions, just ask.

[xarthurx]

This is exactly what I want! Thank you.

Just one more question: In the doc: https://content.nuxtjs.org/api/components/content-list
it uses a v-slot:

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

while you use <template #default="{ list }">. May I ask what is the difference? (I'm a bit new to Vue).

[xarthurx]

Ah, I see. If I want the <template #not-found>, I can only do it in your way.

[nobkd]

Exactly. 👍

[xarthurx]

Hi @nobkd , sorry to bother, but one more follow up question:

Is the keyword list reserved? It seems if I change to other string, the query will not work...
But I cannot find documentation for this.

[nobkd]

Yes. I think the <ContentList> component sets it to the list variable.
Would probably be a good idea to mention this in the docs.