0

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?

kissu
  • 40,416
  • 14
  • 65
  • 133
Jeremy Knees
  • 652
  • 1
  • 7
  • 21

1 Answers1

2

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.

kissu
  • 40,416
  • 14
  • 65
  • 133
  • If my content json file would always be the same, let's say page.json, how can I modify this such that at / I see report/page.json and at /doc report/doc/page.json? – Jeremy Knees Sep 01 '21 at 09:16
  • 1
    @JeremyKnees a condition/`swtich` followed by an interpolation of the `params.slug` is a good way to solve this. – kissu Sep 01 '21 at 09:22
  • 1
    Actually, the solution I was looking for just needed a ```$content('report', route.fullPath, 'page', { deep: true }).fetch()```. Thanks anyway! You helped a ton :) – Jeremy Knees Sep 01 '21 at 09:56
  • @JeremyKnees hm, didn't know. Nice find! – kissu Sep 01 '21 at 09:59