https://github.com/hootlex/vuejs-paginator

A Vue.js plugin to easily integrate pagination.
https://github.com/hootlex/vuejs-paginator

api pagination vue-pagination vuejs

Last synced: 9 months ago
JSON representation

A Vue.js plugin to easily integrate pagination.

• Host: GitHub
• URL: https://github.com/hootlex/vuejs-paginator
• Owner: hootlex
• License: mit
• Created: 2016-05-29T19:57:59.000Z (about 10 years ago)
• Default Branch: master
• Last Pushed: 2018-09-20T04:33:34.000Z (almost 8 years ago)
• Last Synced: 2025-09-11T14:53:21.055Z (10 months ago)
• Topics: api, pagination, vue-pagination, vuejs
• Language: JavaScript
• Homepage: http://hootlex.github.io/vuejs-paginator/
• Size: 204 KB
• Stars: 286
• Watchers: 9
• Forks: 59
• Open Issues: 9
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# Vue.js Paginator [![CircleCI](https://circleci.com/gh/hootlex/vuejs-paginator.svg?style=shield&circle-token=:circle-ci-badge-token)](https://circleci.com/gh/hootlex/vuejs-paginator) [![npm downloads](https://img.shields.io/npm/dt/vuejs-paginator.svg)](https://www.npmjs.com/package/vuejs-paginator)  [![Software License](https://img.shields.io/badge/license-MIT-brightgreen.svg?style=flat)](LICENSE)

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

![vue paginator preview](http://i.imgur.com/2jah1qt.gif)

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

## Installation

> For Vue 1.* use [v1.0.15](https://github.com/hootlex/vuejs-paginator/tree/v1.0.15).

### Through npm

``` bash

npm install vuejs-paginator --save

```

### From a cdn

```HTML

```

## Usage

Use VPaginator in the HTML.

```html

```

Prepare the Vue instance.

```js

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

```html



  


    {{ animal.name }}

  



```


### Documentation

[Here you can find the detailed Documentation](http://hootlex.github.io/vuejs-paginator/)

## Build Setup

``` bash

# install dependencies

npm install

# build for production with minification

npm run build

# run unit tests

npm run unit

# run all tests

npm test

```