pagination.vue

<template>
  <div v-if="length > 1" class="text-xs-center mt-5">
    <v-pagination v-bind="{ length, totalVisible: totalVisibleResponsive, circle }"
                  v-model="page"/>
  </div>
</template>

<script>
  import { pagination, params } from '~/utils/mixins/pagination'

  const { limit, maxOffset } = params

  export default {
    mixins: [pagination],
    props: {
      limit: { type: Number, default: limit },
      maxOffset: { type: Number, default: maxOffset },
      totalVisible: { type: Number, default: 9 },
      circle: { type: Boolean, default: false }
    },
    computed: {
      totalVisibleResponsive() {
        const breakpoint = this.$vuetify.breakpoint
        if (breakpoint.mdAndUp) return this.totalVisible
        if (breakpoint.sm) return 7
        if (breakpoint.xs) return 5
      }
    }
  }
</script>