vue-bulma-paginate

Install via NPM:

npm < 5.0:
npm install vue-bulma-paginate --save
npm >= 5.0:
npm install vue-bulma-paginate

Usage

Props

Prop	Type	Required	Default	Description
itemsTotal	Number	True	0	Elements to paginate
itemsPerPage	Number	True	1	Elements per page
currentPage	Number	True	1	Current page
url	String	True		Vue Router named route
buttonsMax	Number	False	7	Maximum number of buttons to show including first and last page (must be odd)
queryParameter	String	False	page	Custom query parameter (e.g., example.com/gallery?images-set=2)
nextText	String	False	Next	Custom text for next button
previousText	String	False	Previous	Custom text for previous button
goToText	String	False	Goto page	Custom text for aria-label attribute on "a" tags
pageText	String	False	Page	Custom text for aria-label attribute on current page "a" tag

Example

import Pagination from 'vue-bulma-paginate';
...
components: {
  Pagination,
}
...
<Pagination
  :itemsTotal="pagination.itemsTotal"
  :itemsPerPage="pagination.perPage"
  :currentPage="pagination.currentPage"
  :buttonsMax="5"
  :url="this.$route.name"
  :queryParameter="images-set"
  :nextText="Next set"
  :previousText="Previous set"
  :goToText="Go to the images set"
  :pageText="Images set"
/>

A full example is provided at the Demo.