depsimon/fractal-vuetable-serializer

A fractal serializer that works fine with vuetable.

A fractal serializer that works fine with vuetable.

This package gives you a fractal serializer that makes it easier to work with vuetable pagination., _(*1)

About the VueTableSerializer

If you look into the source of vuetable pagination you can see what it expects to work., _(*2)

{
    "last_page": 10,
    "current_page": 1,
    "total": 100,
    "from": 1,
    "to": 10
}

This is pretty annoying because by default when you return a fractal paginated collection, by default it does not return the same keys for the pagination. It's more something like this:, _(*3)

{
    "total": 10,
    "count": 100,
    "per_page": 10,
    "current_page": 2,
    "total_pages": 10,
    "links": {
        "next": "my-app.dev/books?page=2",
        "pref": "my-app.dev/books?page=1"
    }
}

So I came up with this serializer that makes it easier to work with vuetables' default settings. I'll show you how., _(*4)

Installation

You can install the package via composer:, _(*5)

composer require depsimon/fractal-vuetable-serializer

Usage

Use the VueTableSerializer in your backend code., _(*6)

use DepSimon\FractalVueTableSerializer\VueTableSerializer;
$manager->setSerializer(new VueTableSerializer());

If you're using Laravel, I suggest you to use the laravel-fractal package that makes it really easy to use fractal. In this case you can use it like this :, _(*7)

$paginator = Book::paginate(5);
$books = $paginator->getCollection();

fractal()
    ->collection($books, new TestTransformer())
    ->serializeWith(new \DepSimon\FractalVueTableSerializer\VueTableSerializer())
    ->paginateWith(new IlluminatePaginatorAdapter($paginator))
    ->toArray();

Here's an example VueJS component taking advantage of this serializer., _(*8)

<template>
    <div>
        <vuetable
            ref="vuetable"
            api-url="http://my-app.dev/books"
            :fields="fields"
            :pagination-path="paginationPath"
            :pagination-component="paginationComponent"
            @vuetable:pagination-data="onPaginationData"
            @vuetable:load-success="onLoadSuccess"></vuetable>
        <vuetable-pagination-info
            ref="paginationInfo"></vuetable-pagination-info>
        <component
            ref="pagination"
            :is="paginationComponent"
            @vuetable-pagination:change-page="onChangePage"></component>
    </div>
</template>