Vuejs container pagination

app.js

// Se necesita instalar: npm install vuejs-paginate --save
import VuePaginationContainer from '@/components/vue-pagination-container';
Vue.component('vue-pagination-container', VuePaginationContainer);
import VuePagination from '@/components/vue-pagination';
Vue.component('vue-pagination', VuePagination);

app.vue

<template>
  <vue-pagination-container :items="itemsTest" :page="currentPageTest" :per-page="itemsPerPage">
      <div slot-scope="row">
          Esto es una prueba para el usuario con nombre {{row.item.name}}
      </div>
  </vue-pagination-container>
  <vue-pagination :page="currentPageTest" :pages="Math.ceil(itemsTest.length/itemsPerPage)" :onPageChange="onPageTestChange"></vue-pagination>
</template>

<script>
export default {
  components: {
  },
  methods:{
    /**
     * Método que se ejecuta cuando cambiamos de página en el paginador.
     * 
     * @param {*} page 
     */
    onPageTestChange: function(page) {
        this.currentPageTest = page;
        console.log('cambio pagina test');
    }
  },
  data () {
    return {
      itemsPerPage: 5,
      itemsTest: [
            {name: 'Name1', lastname: 'Lastname1'},
            {name: 'Name2', lastname: 'Lastname2'},
            {name: 'Name3', lastname: 'Lastname3'},
            {name: 'Name4', lastname: 'Lastname4'},
            {name: 'Name5', lastname: 'Lastname5'},
            {name: 'Name6', lastname: 'Lastname6'},
            {name: 'Name7', lastname: 'Lastname7'},
            {name: 'Name8', lastname: 'Lastname8'},
            {name: 'Name9', lastname: 'Lastname9'},
            {name: 'Name10', lastname: 'Lastname10'},
            {name: 'Name11', lastname: 'Lastname11'},
            {name: 'Name12', lastname: 'Lastname12'},
            {name: 'Name13', lastname: 'Lastname13'},
            {name: 'Name14', lastname: 'Lastname14'},
            {name: 'Name15', lastname: 'Lastname15'},
            {name: 'Name16', lastname: 'Lastname16'},
            {name: 'Name17', lastname: 'Lastname17'},
            {name: 'Name18', lastname: 'Lastname18'},
            {name: 'Name19', lastname: 'Lastname19'},
        ],
        currentPageTest: 1
    }
  }
}
</script>

<style lang="stylus" scoped>
</style>

vue-pagination-container.js

export default {
    props: {
        // Método que se llama al hacer clic sobre una página.
        'items': {
            type: Array
        },
        // Pagina actual.
        'page': {
            type: Number,
            default: 1
        },
        // Número de items por página.
        'per-page': {
            type: Number,
            default: 1
        }
    },

    data: function(){
        return {
            currentPage: 1,
            list: []
        };
    },

    watch: {
        page: function(val){
            this.currentPage = val;
            this.paginate();
        }
    },

    computed: {
        // Todo
    },

    created: function(){
        this.currentPage = this.page;
        this.paginate();
    },

    template:`
        <div>
            <slot v-for="item in list" :item="item"></slot>
        </div>
    `,

    methods: {

        /**
         * Pagina el listado de items.
         */
        paginate(){
            this.list = this.items.slice((this.currentPage - 1) * this.perPage, this.currentPage * this.perPage);
        }

    }
};

vue-pagination.js

//Vue Paginate
import VuePaginate from 'vuejs-paginate';

export default {
    props: {
        // Método que se llama al hacer clic sobre una página.
        'onPageChange': {
            type: Function
        },
        // Número total de páginas.
        'pages': {
            type: Number
        },
        // Pagina actual.
        'page': {
            type: Number,
            default: 1
        },
        // Número de páginas que se muestran en los márgenes si hay muchas páginas.
        'offset': {
            type: Number,
            default: 1
        }
    },

    data: function(){
        return {
            currentPage: 1
        };
    },

    watch: {
        page: function(val){
            this.currentPage = val;
        }
    },

    computed: {
        // Todo
    },

    created: function(){
        this.currentPage = this.page;
    },

    template:`
        <paginate
            v-model="currentPage"
            :page-count="pages"
            :click-handler="onPageChange"
            :container-class="'pagination'"
            :page-class="'page-item'"
            :margin-pages="offset"
            :prev-text="'«'"
            :next-text="'»'"    
        >
        </paginate>   
    `,

    methods: {

    },

    components: {
        'paginate': VuePaginate
    }
};