# m24-vue-pagination

> Simple Vue.js pagination

Latest version **1.0.4** (published 2020-02-27) · MIT license · 0 weekly downloads

## Install

```sh
npm install m24-vue-pagination
pnpm add m24-vue-pagination
yarn add m24-vue-pagination
bun add m24-vue-pagination
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.4 |
| Published | 2020-02-27 |
| First published | 2020-02-20 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 21.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Adam Stradovnik |
| Maintainers | neoglyph |
| Keywords | vue, component, laravel, pagination |

## Links

- npm: https://www.npmjs.com/package/m24-vue-pagination
- Repository: https://github.com/Media24si/m24-vue-pagination
- Issues: https://github.com/Media24si/m24-vue-pagination/issues
- npm.io page: https://npm.io/package/m24-vue-pagination

## Dependencies (1)

- [vue](https://npm.io/package/vue.md) latest

## Recent versions

- 1.0.4 (latest) — 2020-02-27
- 1.0.3 — 2020-02-26
- 1.0.2 — 2020-02-26
- 1.0.1 — 2020-02-26
- 1.0.0 — 2020-02-20
- 0.0.1-security — 2020-02-20

## README

# vue-pagination
Simple unstyled Vue pagination component.

<p align="center">
  <a href="LICENSE">
    <img src="https://img.shields.io/badge/license-MIT-brightgreen.svg?style=flat-square" alt="Software License" />
  </a>
  <a href="https://npmjs.org/package/m24-vue-pagination">
    <img src="https://img.shields.io/npm/v/m24-vue-pagination.svg?style=flat-square" alt="Packagist" />
  </a>
</p>

* [Vue.js](http://vuejs.org/) (tested with 2.6.11).

### Installation
```
npm install --save m24-vue-pagination
```

### Example
```js
import pagination from 'm24-vue-pagination'

new Vue({
  el: '#app',
  data: {
    total: 0,
    currentPage: 1,
    items: [],
  },
  mounted () {
    this.loadData(this.currentPage)
  },
  methods: {
    loadData(page) {
      this.currentPage = page
      const options = {
        params: {
          page: this.currentPage
        }
      }

      window.axios.get('/getData', options)
        .then(response => {
          this.items = response.data.data
          this.total = response.data.paginate.total
         })
    }
  },
  components: {
    pagination
  }
})
```

```html
<body id="app">
  <ul class="list-group">
    <li class="list-group-item" v-for="item in items">{{ item.name }}</li>
  </ul>

  <pagination
    :total="total"
    :page="currentPage"
    @page-change="loadData" />
</body>
```

#### Props
| Name          | Type     | Default | Required | Description
| :------------ | :--------| :-------| :--------| :-----------
| total         | Number   |         | true     | Total number of items
| page          | Number   | 0       |          | The current page number
| perPage       | Number   | 10      |          | Number of items per page
| maxShown      | Number   | 5       |          | Number of items shown on each site
| navBack       | String   | «       |          | Back indicator (can be HTML, such as svg, icon...)
| navFront      | String   | »       |          | Forward indicator (can be HTML, such as svg, icon...)

### Events
| Name          | Returns  | Description
| :------------ | :--------| :-----------
| page-change    | selected page | Event that sends back the selected page

## Contributing

Please see [CONTRIBUTING](CONTRIBUTING.md) for details.

## License

The MIT License (MIT). Please see [License File](LICENSE.md) for more information.

[link-author]: https://github.com/pogachar

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