Dynamic Nuxt content fetching depending of the path

Question

I have a folder structure in my nuxt project like this:

...
/pages/_slug.vue
/content
  /report
    page1.json
    /doc
      page2.json

In my pages folder I have a _slug.vue file

<template>
  <div>{{ profile.hello }}</div>
</template>

<script>
export default {
  async asyncData ({ $content, params }) {
    const profile = await $content('report', params.slug, { deep: true }).fetch()
    return { profile }
  }
}
</script>

When I visit /page1 all works fine, however when I request /doc/page2 no page is being rendered. Now I am confused since I added { deep:true } to achieve this behavior but this doesn't work. How can I make sure that the folder structure resembles my routes?

Answer 1

If you set pages/_.vue and write this content in it, it should work properly

<template>
  <div>{{ profile.hello }}</div>
</template>

<script>
export default {
  async asyncData({ $content, route }) {
    const profile = await $content('report', route.fullPath, { deep: true }).fetch()
    return { profile }
  },
}
</script>

This is working because of the usage of Unknown Dynamic Nested Routes.

---

This solution is using the following pattern of $content('articles', params.slug) and converting it into /articles/${params.slug} as shown in the part of the documentation.