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/.

Top comments (1)

Collapse
 
retroriff profile image
retroriff • Edited

This worked fine to me:

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