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