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.

For Vue 1.* use v1.0.15.

npm install vuejs-paginator --save

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

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 } } ... });

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>

Here you can find the detailed Documentation

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