Display Prev/Next blog page buttons using URL query (pagination)

I’ve been searching the Nuxt JS Content docs to try and find some kind of example where I can list out all of my blog posts on a page and have some kind of blog pagination.

I did manage to find an article, but it suggested using the following URL structure:

• https://example.com/blog/page/1
• https://example.com/blog/page/2

And the parent /blog page would redirect to the /page/1`.

I actually want to utilise the URL query and hopefully have something simplier.

I’m currently getting all of my blog posts on my page:

• https://domain-monitor.io/blog

<script>
export default {
  head () {
    return {
      title: 'Domain Monitor | Blog',
      meta: [
        { hid: 'og:title', name: 'og:title', content: 'Domain Monitor | Blog' },
        { hid: 'description', name: 'description', content: 'Domain Monitor updates, product news, useful guides and information to help you start monitoring your next domain. Starting reading today.' },
        { hid: 'og:description', name: 'og:description', content: 'Domain Monitor updates, product news, useful guides and information to help you start monitoring your next domain. Starting reading today.' }
      ]
    }
  },
  async asyncData ({ $content }) {
    const blogs = await $content('blog')
                        .sortBy('createdAt', 'desc')
                        .fetch()
    return {
      blogs
    }
  }
}
</script>

I’m displaying my blogs via a v-for="(blog, index) in blogs".

I was thinking of using a Javascript .slice() method to slice the array, and then when I click a Next button it changes the URL to:

• https://domain-monitor.io/blog?page=2

But I got stuck trying to find a proper implementation of this, and wondered how this would scale with hundreds of posts…

Any suggestions?

[NozomuIkuta]

@sts-ryan-holton

mounted is called after asyncData is completed. You have to move the whole logic to fetch blogs to mounted hook, so that you can use this.$route.query.page there.

By the way, to be honest, you should review Nuxt’s basics such as its lifecycle. Nuxt community well organizes information for us to achieve our goals in most cases. 🙌

[sts-ryan-holton]

Any update here?