vue-plain-pagination

vue-plain-pagination

A simple pagination component for Vue.

Live demo: http://example.silversite.pl/vue-pagination/ (styles from Bootstrap 4)

Dependencies

• Vue.js 2 - progressive JavaScript framework

Installation

via Yarn

yarn add vue-plain-pagination

via NPM

npm install vue-plain-pagination

Basic usage

<template>
  <div>
    <p>Current page: {{ currentPage }}</p>
    <v-pagination v-model="currentPage" :page-count="30"></v-pagination>
  </div>
</template>

<script>
import vPagination from 'vue-plain-pagination'

export default {
  components: { vPagination },
  data() {
    return {
      currentPage: 1
    }
  }
}
</script>

Properties

| name | type | require | default | | --- | --- | --- | | v-model | Number | yes | - | | page-count | Number | yes | - | | classes | Object | no | {ul:'pagination', li:'pagination-item', liActive:'pagination-item--active', liDisable:'pagination-item--disable', button:'pagination-link', buttonActive:'pagination-link--active', buttonDisable:'pagination-link--disable'} |

Contributing

Files structure is generated by Vue CLI 3 (babel, eslint).

via Yarn

# install dependencies
yarn install

# compiles and hot-reloads for development
yarn run serve

# compiles bundle for production
yarn run build-lib

# lints and fixes files
yarn run lint

via NPM

# install dependencies
npm install

# compiles and hot-reloads for development
npm run serve

# compiles bundle for production
npm run build-lib

# lints and fixes files
npm run lint

License

Code released under the MIT license.