I'm attempting to add pagination to my blog which is setup with nuxt/content module and I am currently pulling all my posts in which I want to avoid.
this is the blog page:
...
<ul class="pl-5">
<li v-for="post in posts" :key="post.id">
<nuxt-link :to="{ name: 'blog-slug', params: { slug: post.slug } }">
<h3 class="py-1 text-white">{{ post.title }}</h3>
<p class="text-white">{{ post.description }}</p>
<a :to="{ name: 'blog-slug', params: { slug: post.slug }}" class="text-red-600">Read More</a>
</nuxt-link>
</li>
</ul>
...
<script>
export default {
async asyncData({ $content, params }){
const posts = await $content('posts', params.slug)
.only(['title', 'slug', 'date'])
.sortBy('createdAt', 'desc')
.fetch()
return { posts }
},
}
</script>
Now I know I can use limit(10) to limit the number of posts shown but I'm not sure how I would tie that into a pagination component I guess using params?
Anyone have any experience with this who could point me in the right direction? If so much appreciated.
Most solutions that I've come across use a combination of
limit()andskip()to achieve paginated results. (I do wish something easier to implement was built in to the content module.)And you're on to something when you are thinking about pulling the current position from the page params.
Here's a decent example of that in action:
github.com/nuxt/content/issues/293