curso vue laravel paginacion

1-Modificar el controlador para que en el metodo index(el de listar) se devuelva una respuesta
que contemple las variables necesarias para la paginacion
2-Crear un componente que lea las variables que devuelve el controler y maneje la paginacion
3-Registrar el componente de paginacion en el app.js


CategoriaController.php:

public function index(Request $request)
    {
       
        $categorias = Categoria::paginate(3);
        $response = [
            'pagination' => [
                'total' => $categorias->total(),
                'per_page' => $categorias->perPage(),
                'current_page' => $categorias->currentPage(),
                'last_page' => $categorias->lastPage(),
                'from' => $categorias->firstItem(),
                'to' => $categorias->lastItem()
            ],
            'data' => $categorias
        ];
        return response()->json($response);
    }


creamos en resources/js/components/PaginationComponent.vue:
(la parte de html usa el estilo de coreui)

<template>
    <nav>
      <ul class="pagination">
        <li class="page-item">
            <a class="page-link" @click.prevent="changePage(pagination.current_page - 1)" :disabled="pagination.current_page <= 1">Ant</a>
        </li>
        <li v-for="page in pages" class="page-item" :class="isCurrentPage(page) ? 'active' : ''">
                <a class="page-link" @click.prevent="changePage(page)">{{ page }}</a>
        </li>
        <li class="page-item">
            <a class="page-link" @click.prevent="changePage(pagination.current_page + 1)" :disabled="pagination.current_page >= pagination.last_page">Sig</a>
        </li>
      </ul>
    </nav>
   
</template>

<style>
    .pagination {
        margin-top: 40px;
    }
</style>

<script>
    export default {
        props: ['pagination', 'offset'],
        methods: {
            isCurrentPage(page) {
                return this.pagination.current_page === page;
            },
            changePage(page) {
                if (page > this.pagination.last_page) {
                    page = this.pagination.last_page;
                }
                this.pagination.current_page = page;
                this.$emit('paginate');
            }
        },
        computed: {
            pages() {
                let pages = [];
                let from = this.pagination.current_page - Math.floor(this.offset / 2);
                if (from < 1) {
                    from = 1;
                }
                let to = from + this.offset - 1;
                if (to > this.pagination.last_page) {
                    to = this.pagination.last_page;
                }
                while (from <= to) {
                    pages.push(from);
                    from++;
                }
                return pages;
            }
        }
    }
</script>

en app.js

Vue.component('pagination', require('./components/PaginationComponent.vue'));

ya se puede usar el componente, dentro del componente de categoria que maneja toda la grilla de categorias

<pagination v-if="pagination.last_page > 1" :pagination="pagination" :offset="5" @paginate="fetchRecords()"></pagination>
...
<script>
    export default {
        data(){
            return {
                nombre:'',
                descripcion:'',
                arrayCategorias:[],
                modal:0,
                tituloModal:'',
                accion:'',
                errors:[],
                categoria_id:0,
                pagination: {
                    'current_page': 1
                }
            }
        },
        mounted() {
              this.fetchRecords();
        },
        methods:{
            fetchRecords() {
                axios.get('/categorias?page=' + this.pagination.current_page)
                .then(response => {
                    //console.log(response);
                    this.arrayCategorias = response.data.data.data;
                    this.pagination = response.data.pagination;
                })
                .catch(error => {
                    console.log(error.response.data);
                });
            },