Nuxt Pagination

The Nuxt pagination component consists of button-like styled links, that are arranged side by side in a horizontal list. Pagination is built with list HTML elements so screen readers can announce the number of available links.

import {BasePagination} from '@/components'

Global usage

Vue.component(BasePagination.name, BasePagination)

For local usage

export default {
  components: {
    BasePagination
  }
}

Simple pagination

<template>
   <base-pagination :page-count="10" v-model="defaultPagination"></base-pagination>
</template>

<script>
  export default {
    data () {
        return {
          defaultPagination: 1
        }
      }
  }
</script>

Colors

<template>
<div>
  <base-pagination type="danger" :page-count="10" v-model="defaultPagination"></base-pagination>
  <base-pagination type="success" :page-count="10" v-model="defaultPagination"></base-pagination>
  <base-pagination type="info" :page-count="10" v-model="defaultPagination"></base-pagination>
  <base-pagination type="warning" :page-count="10" v-model="defaultPagination"></base-pagination>
</div>
</template>

<script>
  export default {
    data () {
        return {
          defaultPagination: 1
        }
      }
  }
</script>

Pagination Props

PROP NAME TYPE DEFAULT DESCRIPTION
type String primary  
pageCount Number N/A  
perPage Number 10  
showArrows Boolean true  
total Number N/A  
value Number 1  
pagesToDisplay Number 5  

Pagination Events

NAME DESCRIPTION PARAMS
input triggers when the binding value changes (default for v-model) the updated value