How to handle folders in nuxt content? And how to connect with a nuxt app?

[mimoo]

currently this is my nuxt content application:

• components/
  • Report.vue
• content/
  • index.md
  • report1/
    • report.md
    • index.md
  • report2/
    • report.md
    • index.md

where content/index.md contains a list of the reports:

---
layout: article
---

# Reports

- [report 1](/report1)
- [report 2](/report2)

and each report folder contains an index page like this:

:report{path="/report1"}

and report page like this:

---
title: "Report 1"
---

some content

then my Report component is like this:

<script lang="ts" setup>
const props = defineProps({
  path: {
    type: String,
    required: true,
  },
});
</script>

<template>
  <div id="report" class="container mx-auto prose prose-stone">
    <ContentDoc :path="props.path + '/report'" v-slot="{ doc }">
      <!-- front -->
      <Front :title="doc.title" />
      // ...

This feels really redundant, and not really dynamic, can someone tell me what I'm doing wrong and how I can heavily simplify this kind of page?

The second question I have is how can I integrate all of these things in a real nuxt application. I tried to use nuxt last time for this, but I couldn't figure out how to nicely render all the markdown stuff. So now I'm building the nuxt content repo, then building my nuxt repo, and then stitching the html files together. Any advice there?

[Davvii1]

Hi! Two questions, do you want to render the Report component alone in one nuxt page? I want to know how do you want to render it
Also, do you want to only navigate through all of the reports from the index.md file in content?

If you only want to perform navigation through all of the reports and index file, you can use the index.md just like you have it, and remove the report.md file from the /report[number] folders, leading you to the following structure:

• content/
  • index.md
  • report1/
    • index.md
  • report2/
    • index.md

inside content/index.md you will have the same data:

---
layout: article
---

# Reports

- [Report 1](/report1)
- [Report 2](/report2)

then the report[number]/index.md files will contain the content of the report:

---
title: "Report 1"
---

Report 1 content

[Back to index](/)

i dont know if you have this already, and that's why i was asking, but your "catch all routes" page should be [..slug].vue inside your
/pages folder with this content

<template>
  <main>
    <ContentDoc />
  </main>
</template>

this should be good for you to render index and navigate though all of the reports only

[Davvii1]

If you want to make this inside a component, you should use another sintax inside your pages, and not use a "catch all routes" page like [...slug].vue, lets say you have the same structure inside /content and you want to have a component which can render report1/index.md file, for example inside app.vue page:

<template>
  <main>
    <ContentDoc path="/report1" />
  </main>
</template>

/report1 being the path of the content, and index.md of that path will be rendered

[Davvii1]

if you want to make a component to render dynamically the content off any markdown file inside /content, you can make it like this:
/components/Report.vue

<script setup>
defineProps({
  path: { type: String, required: true },
});
</script>

<template>
  <main>
    <ContentDoc :path="path" />
  </main>
</template>

you will have your app.vue with pages rendering:

<template>
  <div>
    <NuxtPage />
  </div>
</template>

and inside /pages folder you cant have any page file like index.vue

<template>
  <div>
    <h1>Header</h1>
    <Report path="/report1" />
  </div>
</template>

<script lang="ts"></script>

here you can see how I use <Report /> component passing as prop the path of the desired markdown file to render in /content