Vue Pagination

Simple, generic and non-intrusive pagination component for Vue.js. Presentation is based on bootstrap.

• Dependencies
• Installation
• Usage

Dependencies

• Vue.js (>=1.0). Required.
• Bootstrap (CSS). Optional.

Installation

Option 1

Compile the code using browserify with the stringify transform

npm install v-pagination

Require the script:

var VuePagination = require('v-pagination');

Option 2

Import the compiled standalone file into your HTML, which will expose a global VuePagination variable.

Usage

LIVE DEMO

Register the component(s)

Vue.use(VuePagination)

HTML:

<pagination for="some-entity" :records="500"></pagination>

props:

• for string required unique identifier for the component instance.
• records number required number of records
• per-page number optional records per page. Default: 25
• chunk number optional max pages per chunk. Default: 10
• count-text string optional total records text. Default: '{count} records'

When a page is selected an event will be dispatched, using the unique id for the component. Listen to it and respond accordingly:

  this.$on('vue-pagination::some-entity', function(page) {
      // display the relevant records using the page param
  });

Programmatic Manipulation

To programmatically set the page apply a v-ref identifier to the component and call setPage on it:

<pagination v-ref="pagination" for="some-entity" :records="500"></pagination>

this.$refs.pagination.setPage(1)