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
}
}
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
}
},
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)
This worked fine to me:
<nuxt-link :to="
mydocs/${doc.dir}">