Content: Real pagination

[haykokalipsis]

So, zero information in internet about paginaion with this. The only one example is with surround filter, but that only gives us previous and next links. I'm talking about mature pagination, with page links, with current page number in url, etc. The one that every blog uses. Is it even possible, and if it is, then can someone provide an example?

[mathe42]

I'm currently working on this in my own project you can have a look here: https://github.com/mathe42/EC-Website-test/blob/beitraege/pages/blog/index.vue It's currently buggy when not starting on the first page but you might get an idea.

When I'm happy with my solution I might create a PR for the docs.

(Note that this project is in german so just ignore the head part ;) )

[haykokalipsis]

Thank you mister. I will try it out. Also when you feel its ready and free of bugs, please inform about it here, so we can link it as an answer and close the question.

[mathe42]

Full (I think bug-free) solution:

<template lang="pug">
  v-container
    v-list(three-line)
      v-list-item(v-for="item in posts" @click="$router.push(`/blog/${item.slug}`)" :key="item.slug")
        v-list-item-avatar
          v-img(:src="item.featuredImage")
        v-list-item-content
          v-list-item-title 
            span(style="margin-right: 20px;") {{item.title}}
            v-chip(color="secondary" v-for="tag in item.tags" :key="tag") {{ tag }}
          v-list-item-subtitle {{item.description}}
    v-pagination(
      v-model="page"
      :length="pageCount"
      :total-visible="7"
    )
</template>
<script>
const pagination = {
  getPostsOfPage($content, page) {
    return $content('blog')
      .only(['title', 'tags', 'description', 'featuredImage', 'slug'])
      .sortBy('published', 'desc')
      .skip(10 * (page - 1))
      .limit(10)
      .fetch()
  },

  async getNumberOfPages($content) {
    return Math.ceil((await $content('blog').only([]).fetch()).length / 10)
  },
}

export default {
  async asyncData({ $content, query }) {
    const page = parseInt(query.page || '1') || 1

    const [posts, pageCount] = await Promise.all([
      pagination.getPostsOfPage($content, page),
      pagination.getNumberOfPages($content),
    ])

    return { posts, page, pageCount }
  },
  data() {
    return {
      posts: [],
      page: 1,
      pageCount: 1,
    }
  },
  watch: {
    async page() {
      this.$router.replace({ path: '/blog', query: { page: this.page } })
      this.posts = await pagination.getPostsOfPage(this.$content, this.page)
    },
  },
}
</script>

[benjamincanac]

@mathe42 Thanks for your example, would you mind making a PR to add it to the snippets section on the documentation?