Vue.js Paginator

A Vue.js plugin to easily integrate pagination in your projects.

VueJs Paginator is a simple but powerful plugin since it gives you access on how to render the data, instead of using a predefined table.

The way you use it is similar to Laravel's paginator.

Installation

For Vue 1.* use v1.0.15.

Through npm

npm install vuejs-paginator --save

From a cdn

<script src="https://cdnjs.cloudflare.com/ajax/libs/vuejs-paginator/2.0.0/vuejs-paginator.js"></script> <!-- or --> <script src="https://cdn.jsdelivr.net/vuejs-paginator/2.0.0/vuejs-paginator.min.js"></script>

Usage

Use VPaginator in the HTML.

<v-paginator resource_url="api/animals" @update="updateResource"></v-paginator>

Prepare the Vue instance.

// if you are not using the cdn version you have to import VuePaginator. // import VuePaginator from 'vuejs-paginator' new Vue({     data () {       return {         animals: []       }     },     components: {         VPaginator: VuePaginator     },     methods: {       updateResource(data){         this.animals = data       }     }   ... });

Thats it

Every time a page is changed or fetched, resource variable will contain the returned data.

<ul>   <li v-for="animal in animals">     {{ animal.name }}   </li> </ul>

Documentation

Here you can find the detailed Documentation

Build Setup

# install dependencies npm install  # build for production with minification npm run build  # run unit tests npm run unit # run all tests npm test