V-simple-paginate NPM

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/v-simple-paginate@2.0.0"></script>

Register the component

Global

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>