I'm using the nuxt/content module to create a documentation site.
On the Nuxt blog they have one post displaying the content on a separated index.vue page and the post details on the _slug.vue page.
What I'm trying to do is show the list of articles/posts on the same page using a different layout.
Here is the folder structure I'm using:
content (folder)
articles (folder)
article1.md
article2.md
article3.md
pages (folder)
blog (folder)
_slug.vue
index.vue
And that's my_slug.vue file:
<template>
<div class="flex">
<aside class="w-1/3">
<ul>
<li v-for="article in articles" :key="article.slug">
<NuxtLink :to="{ name: 'blog-slug', params: { slug: article.slug } }">
<div>
<h2>{{ article.title }}</h2>
</div>
</NuxtLink>
</li>
</ul>
</aside>
<main class="w-full">
<h1>{{ article.title }}</h1>
<p>Article last updated: {{ formatDate(article.updatedAt) }}</p>
<nuxt-content :document="article" />
<prev-next :prev="prev" :next="next" />
</main>
<aside class="w-1/3">
<h4>On this page</h4>
<nav>
<ul>
<li v-for="link of article.toc" :key="link.id">
<NuxtLink :to="`#${link.id}`" :class="{ 'py-2': link.depth === 2, 'ml-2 pb-2': link.depth === 3 }">{{ link.text }}</NuxtLink>
</li>
</ul>
</nav>
</aside>
</div>
</template>
<script>
export default {
async asyncData({ $content, params }) {
const articles = await $content('articles', params.slug)
.only(['title', 'slug'])
.sortBy('createdAt', 'asc')
.fetch()
const article = await $content('articles', params.slug).fetch()
const [prev, next] = await $content('articles')
.only(['title', 'slug'])
.sortBy('createdAt', 'asc')
.surround(params.slug)
.fetch()
return {
articles,
article,
prev,
next
}
},
methods: {
formatDate(date) {
const options = { year: 'numeric', month: 'long', day: 'numeric' }
return new Date(date).toLocaleDateString('en', options)
}
}
}
</script>
If I use the "Display all articles" piece of code on the index.vue page it works but together on the _slug.vue the list is now empty.
Here is the index where the posts are showing up correctly:
<template>
<div>
<h1>Blog Posts</h1>
<ul>
<li v-for="article of articles" :key="article.slug">
<NuxtLink :to="{ name: 'blog-slug', params: { slug: article.slug } }">
<div>
<h2>{{ article.title }}</h2>
</div>
</NuxtLink>
</li>
</ul>
</div>
</template>
<script>
export default {
async asyncData({ $content, params }) {
const articles = await $content('articles', params.slug)
.only(['title', 'slug'])
.sortBy('createdAt', 'asc')
.fetch()
return {
articles
}
}
}
</script>
<style>
</style>
Am I'm missing something?