Vue2Paginate

Vue Component for Vue 2.x

Install

    npm install vue2-paginate --save

Demo

For demo, please see here

Usage

1. Import the component

import Vue2Paginate from 'vue2-paginate';

2.1 Use it globally

Vue.use(Vue2Paginate);

// OR with options

Vue.use(Vue2Paginate, {baseURL: 'https://jsonplaceholder.typicode.com/', headers: {'X-API-KEY': 1234}});

*3. Access it locally

<template>
    <vue2-paginate ref="http" v-model="data" :error-fn="onError"></vue2-paginate>
</template>

components: {
    'vue2-paginate': Vue2Paginate
},

Properties

• value: Array

• size: String (default: sm)

• centered: Boolean (default: 1)

• itemsPerPage: Number (default: 3)

• autoHide: Boolean

Example

<template>
    <div id="app" style="text-align: center">
        <div>
            <div class="card card-body">
                <h3>World countries</h3>

                <div v-for="item in items" :key="item.name.common">
                    <div class="card card-body">Capital of {{item.name.common}} is {{item.capital[0]}}</div>
                </div>
            </div>

            <vue2-paginate v-model="data" :items.sync="items"></vue2-paginate>
        </div>
    </div>
</template>

<script>
    import Vue from 'vue';
    import Vue2Paginate from '../src/index'
    import countries from 'world-countries/dist/countries';

    Vue.use(Vue2Paginate, {});

    export default {
        name: 'app',
        data() {
            return {
                data: countries,
                items: [],
            }
        },
        methods: {
            test() {
                // code
            }
        },
    }
</script>

Contributing

Contributions are welcome

Build Setup

# install dependencies
npm install

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

# build for production with minification
npm run build