v-simple-paginate

Vue.js (v2.x +) component for make pagination without default styles. This allows you to style the component as you wish.

Demo

Installation

NPM

$ npm i v-simple-paginate

YARN

$ yarn add v-simple-paginate

CDN

<!-- use the latest release -->
<script src="https://unpkg.com/v-simple-paginate@latest"></script>
<!-- or use the specify version -->
<script src="https://unpkg.com/[email protected]"></script>

Register the component

Global

• ES5

var Vue = require('vue');
var Paginate = require('v-simple-paginate');
Vue.component('paginate', Paginate);

• ES6+

import Vue from 'vue';
import Paginate from 'v-simple-paginate';
Vue.component('paginate', Paginate);

Local

import Paginate from 'v-simple-paginate';

export default {
    components: { Paginate }
}

Usage

Basic Usage

<paginate
  :value="currentPage"
  :per-page="perPage"
  :total="total"
  @input="callback()"
/>

Note: In vue template, camelCase and kebab-case are both supported. For example, you can either use prop page-count or pageCount. They are leading to the same result.

So this is also available

<paginate
  v-model="currentPage"
  :perPage="perPage"
  :total="total"
/>

Example

<template>
  <paginate
    :value="currentPage"
    :per-page="perPage"
    :total="total"
    @input="callback"
  />
</template>

<script>
export default {
  data: () => ({
    total: 500,
    perPage: 10,
    currentPage: 1,
  }),

  methods: {
    callback (pageNumber) => {
      console.log(pageNumber);
      ...
      this.currentPage = pageNumber;
    }
  }
}
</script>

<style lang="css">
.active {
    background-color: red;
}

.hide {
    display: none;
}
</style>

Props

| Name                                        | Type | Required | Description | | ----------------- | :--- | :--- | :--- | | value | Number | true | Current page. | | perPage | Number | true | Number of items per page. | | total | Number | true | Total items. | | pageRange | Number | false | The range of visible elements around the active page. Default: 2 | | showPrevNext | Boolean | false | Will the previous and next buttons be visible. Default: true | | activeClass | String | false | CSS class name for active page element. Default: 'active' | | btnHideClass | String | false | CSS class name for active page element. Default: 'active' | | classes | Object | false | An object with CSS classes to customization the component. |

About props classes

| Name                          | Description | | ----------------- | :--- | | wrapperClass | CSS class name for wrapper the component. | | itemClass | CSS class name for all items (buttons and break view). | | btnClass | CSS class name for buttons class. | | breakViewClass | CSS class name for break view. | | prevNextClass | CSS class name for previous and next buttons. |

Default:

{
  wrapperClass: 'v-simple-pagination',
  itemClass: '',
  btnClass: '',
  breakViewClass: '',
  prevNextClass: '',
}

Slots

| Name                                      | Description | | --- | --- | | prevContent | Previous button | | nextContent | Next button | | breakViewContent | Break view indicator |

Example

<paginate
  :value="currentPage"
  :perPage="perPage"
  :total="total"
  @input="callback"
>
  <template v-slot:prevPage>PREV</template>

  <template v-slot:nextPage>NEXT</template>

  <template v-slot:breakView>...</template>
</paginate>

Emit

Emit: input is a callback with the param page number to update the current page.

License

MIT