DEV Community

Chloe
Chloe

Posted on

Pagination in Nuxt

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>
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (6)

Collapse
 
toddmorey profile image
Todd Morey • Edited

Most solutions that I've come across use a combination of limit() and skip() 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

Collapse
 
cguttweb profile image
Chloe • Edited

Ah cool I'll have a look and read up on skip I do remember that being mentioned in posts I've read and the watch query. Thanks.

Collapse
 
patarapolw profile image
Pacharapol Withayasakpunt

My solution is

pagination

But I didn't use Nuxt Content (and I didn't really trust Nuxt Content itself).

Collapse
 
cguttweb profile image
Chloe • Edited

I see what you're getting at but not really what I want I just want the pagination on the blog page no need for it elsewhere and my structure is this:
dev-to-uploads.s3.amazonaws.com/i/...
with blog page and _slug vue for the post content itself

well trying to add that image failed...

Collapse
 
lowcozy profile image
LowCozy

use this package bro npmjs.com/package/vuejs-paginate

Collapse
 
cguttweb profile image
Chloe

I'm going to have a go myself if I fail miserably (likely :)) I'll come back and take a look at this. Thanks.