I have implemented the nuxt/content module to establish a documentation website.
In a recent post on the Nuxt blog, they demonstrated displaying content in a separate index.vue page and post details on the _slug.vue page.
My goal is to present a list of articles/posts on the same page using a distinct layout.
Below is the folder structure I have set up:
content (folder)
articles (folder)
article1.md
article2.md
article3.md
pages (folder)
blog (folder)
_slug.vue
index.vue
Here is the content of 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>
When I include the "Display all articles" code snippet on the index.vue page, it functions correctly. However, when both are integrated on the _slug.vue page, the list appears empty.
Here is the index page where the posts are displayed 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>
Can someone help me figure out what I might be overlooking?