# vpaging

> Vue.js pagination component

Latest version **0.1.3** (published 2017-02-20) · 0 weekly downloads

## Install

```sh
npm install vpaging
pnpm add vpaging
yarn add vpaging
bun add vpaging
```

## Health

**Score 10/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; low quality score; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.3 |
| Published | 2017-02-20 |
| First published | 2017-02-15 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Maintainers | mangooli |
| Keywords | pagination, vue, bootstrap |

## Links

- npm: https://www.npmjs.com/package/vpaging
- Repository: https://github.com/mangooLi/vpaging
- Homepage: https://github.com/mangooLi/vpaging#readme
- Issues: https://github.com/mangooLi/vpaging/issues
- npm.io page: https://npm.io/package/vpaging

## Dependencies (1)

- [vue](https://npm.io/package/vue.md) >=1.0 <2.0.0

## Alternatives

- [@sveltejs/kit](https://npm.io/package/@sveltejs/kit.md) — 2.2M weekly downloads
- [@atlaskit/theme](https://npm.io/package/@atlaskit/theme.md) — 402.0K weekly downloads
- [@tangle-network/brand](https://npm.io/package/@tangle-network/brand.md) — 10.0K weekly downloads
- [seneca](https://npm.io/package/seneca.md) — 7.4K weekly downloads
- [@bsb/base](https://npm.io/package/@bsb/base.md) — 7.2K weekly downloads

## Recent versions

- 0.1.3 (latest) — 2017-02-20
- 0.1.2 — 2017-02-20
- 0.1.1 — 2017-02-15
- 0.1.0 — 2017-02-15
- 0.1.4 — 2017-02-15

## README

# Vue Pagination

Note: This package is for use with Vuejs 1.
For version 2 please use [vue-pagination-2](https://www.npmjs.com/package/vue-pagination-2) instead.

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

- [Dependencies](#dependencies)
- [Installation](#installation)
- [Usage](#usage)
- [Programmatic Manipulation](#programmatic-manipulation)
- [Computed Properties](#computed-properties)

# Dependencies

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

# Installation



Compile the code using `browserify` with the `stringify` transform

    npm install vpaging

Require the script:

    var VuePaging = require('vpaging');



## Register the component

    Vue.use(VuePaging)

HTML:

    <page v-href:vpage :records="500" pagelength="[10,20,30]"></page>

props:

* `records` `number` `required` number of records
* `pagelength` `Array` number of lists contained in one page

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('vPageChanged', function(page) {
          // display the relevant records using the page param
      });

Just check the source code if you have any problem.it is easy.

# Programmatic Manipulation

To programmatically set the page apply a `v-ref` identifier to the component and use one of the following methods:

* `setPage(page)`
* `next()`
* `prev()` 

If you wanna to use thoese methods in parent scope:
```
this.$refs.vpage.setPage(1);
this.$refs.vpage.next();
this.$refs.vpage.prev();
```


# Computed Properties

* `totalPages`

---
_Source: https://npm.io/package/vpaging · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._