vue-pagin8 v1.0.0

Vue Pagin8

Simple and bautiful Vue 2 pagination component (Vue 3 Here)

This pagination component can be used by client which changes the page with arrows or input

this project will be completed with new features and more styles in the future.

you can contribute in this project using the github repository.

Installation

for install vue-pagin8 you must run the following command in your command-line:

npm install vue-pagin8

Demo

You can see demo Here

Import Component-level

You should just import the component and use it.

<template>
  <div>
    <!-- Your Other Codes -->
    <!-- When triggering currentPage event, you should call your backend api to get $event page that shows the selected page by client -->
    <Paginate 
    :initPage="1" 
    :totalPages="totalPage" 
    @currentPage="callApiToGetOtherPage($event)"
    :color="red"
    >
    </Paginate>

    <!-- Your Other Codes -->
  </div>
</template>

<script>
import Paginate from "vue-pagin8";

export default {
data(){
    return{
        initPage:1,
        totalPages:1, // From backend
    }
}
// Your Other Codes
  components: {
    Paginate,
  },
// Your Other Codes
};
</script>

Import Globally

You should just import vue-pagin8 on main.js file in root directory of your project:

import Vue from 'vue'
// Your other imports
import Paginate from 'vue-pagin8'
// ...
Vue.component('Paginate', Paginate)
// ...

Props and Events

Props:

Events: