Tiny Pagination Component For Vue.js

Tiny Pagination Component For Vue.js

A Vue component to create a tiny and customizable pagination for long web content.

<vue-tiny-pagination />

A Vue component for create a tiny pagination with Flexbox


Install/Usage

$ npm i -S vue-tiny-pagination
<div id="#app">
    <tiny-pagination
      :total="currentTotal"
      @tiny:change-page="changePage"></tiny-pagination>
</div>

You can use local registration

import {TinyPagination} from 'vue-tiny-pagination'

new Vue({
  el: '#app',
  data() {
    return {
      currentTotal: 100,
      currentPage: 1
    }
  },
  methods: {
    changePage (pagination) {
      this.currentPage = pagination.page
    }
  },
  components: {
    TinyPagination
  }
});

or global registration

import TinyPagination from 'vue-tiny-pagination'
Vue.use(TinyPagination)

Usage in browser

In browser you can use Unpkg:

https://unpkg.com/[email protected]/dist/vue-tiny-pagination.min.js

Example in browser here: https://jsfiddle.net/coderdiaz/g5vLex83/3/

Documentation

For see the complete documentation go to the official website.

Donate

Buy Me A Coffee

Development

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build docs with minification
npm run compile:docs

# build project
npm run build

# run tests
npm run test

What's Included

  • npm run dev: Webpack + vue-loader with proper config for source maps & hot-reload.

  • npm run build: build with HTML/CSS/JS minification.

For detailed explanation on how things work, consult the docs for vue-loader. Also check out the breaking changes in [email protected].

Contributions

All contributions are welcome send your PR and Issues.

License

This is a open-source software licensed under the MIT license

Crafted by Javier Diaz

Github Repository

Tags: #VueJs