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?

What is the content of params.slug when you're on /doc/page2? Should it be 'page2' or '/doc/page2'? — kissu
– kissu, Commented Aug 31, 2021 at 15:51

kissu · Accepted Answer · 2021-08-31 16:44:20Z

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.

answered Aug 31, 2021 at 16:44

kissu

47.3k16 gold badges94 silver badges196 bronze badges

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

4 Comments

Jeremy Knees Over a year ago

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?

kissu Over a year ago

@JeremyKnees a condition/swtich followed by an interpolation of the params.slug is a good way to solve this.

Jeremy Knees Over a year ago

Actually, the solution I was looking for just needed a $content('report', route.fullPath, 'page', { deep: true }).fetch(). Thanks anyway! You helped a ton :)

kissu Over a year ago

@JeremyKnees hm, didn't know. Nice find!

Collectives™ on Stack Overflow

Dynamic Nuxt content fetching depending of the path

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related