🎁 New FeathersVuexPagination Renderless Component

This release includes an awesome new FeathersVuexPagination component which simplifies implementing Server-Side Pagination solutions. It's a Renderless component, so bring your own UI to the #default slot.

Read the documentation

Example:

<template>
  <div>
    <FeathersVuexPagination v-model="pagination" :latest-query="latestQuery">
      <template #default="{ currentPage, pageCount, toStart, toEnd, toPage, next, prev, canNext, canPrev }">
        <PaginationUi
          :current-page="currentPage"
          :page-count="pageCount"
          :can-prev="canPrev"
          :can-next="canNext"
          @to-start="toStart"
          @to-end="toEnd"
          @to-page="toPage"
          @next="next"
          @prev="prev"
        />
      </template>
    </FeathersVuexPagination>

    <!-- Results -->
    <div>
      <div v-for="item in items" :key="item._id">
        {{ item }}
      </div>
    </div>
  </div>
</template>

<script>
import { ref, computed, watch } from '@vue/composition-api'
import { models, useFind, FeathersVuexPagination } from 'feathers-vuex'
import PaginationUi from './PaginationUi.vue'

export default {
  name: 'PaginationExample',
  components: {
    FeathersVuexPagination,
    PaginationUi
  },
  setup(props, context) {
    const { Listing } = models.api

    const pagination = ref({
      $limit: 20,
      $skip: 0
    })

    const params = computed(() => {
      const query = {}
      Object.assign(query, pagination.value)

      return { query, qid: 'listingsPage', paginate: true }
    })

    const { items, latestQuery } = useFind({ model: Listing, params: params })

    return { items, pagination, latestQuery }
  }
}
</script>