DEV Community

Chloe
Chloe

Posted on

How to access subfolders using nuxt content module?

I am currently using this module for my blog and as it is a blog folder with a series of blog posts these render fine, however I'm also attempting to use it to display some documentation which inckude subfolders. I have a docs folder with index.vue with code as follows:

<ul class="mx-auto lg:w-1/2">
   <li class="p-5" v-for="doc in docs" :key="doc.id">
      <nuxt-link :to="{ name: 'docs-slug', params: { slug: doc.slug } }">
      <h2 class="py-4 text-white">{{ doc.title }}</h2>
     </nuxt-link>
   </li>
 </ul>

async asyncData({ $content, params }) {
    const docs = await $content('mydocs', { deep: true }, params.slug).fetch()

        return {
            docs
        }
    }
Enter fullscreen mode Exit fullscreen mode

Now this renders the title of all the pages inside mydocs folder correctly, however, when clicking on one it does not load the corresponding content and I am not sure what I am doing wrong. (If the files are in the base 'docs' folder they render fine)

And in my _slug.vue file I have this:

async asyncData({ $content, params }){
  const docs = await $content('mydocs', { deep: true }, params.slug).fetch()

  return {
    docs
  }
},
Enter fullscreen mode Exit fullscreen mode

For example, I click the Vue title and it tries to load /docs/vue/ when the path is actually docs/js/vue ? I thought using { deep: true } would solve this as the docs it says this will fetch files from subdirectories so how do I set the path? Am I missing something? Anyone come across the same issue?

Any help much appreciated as I'm not sure what I'm doing wrong/.

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More

Top comments (1)

Collapse
 
retroriff profile image
retroriff • Edited

This worked fine to me:

<nuxt-link :to="mydocs/${doc.dir}">

Billboard image

Create up to 10 Postgres Databases on Neon's free plan.

If you're starting a new project, Neon has got your databases covered. No credit cards. No trials. No getting in your way.

Try Neon for Free →

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay