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.

Copy

import {BasePagination} from '@/components'

Global usage

Copy

Vue.component(BasePagination.name, BasePagination)

For local usage

Copy

export default {
  components: {
    BasePagination
  }
}

Simple pagination

Copy

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

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

Colors

Copy

<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
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