PHPackages                             depsimon/fractal-vuetable-serializer - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. depsimon/fractal-vuetable-serializer

ActiveLibrary

depsimon/fractal-vuetable-serializer
====================================

A fractal serializer that works fine with vuetable.

045PHP

Since Oct 14Pushed 9y ago1 watchersCompare

[ Source](https://github.com/depsimon/fractal-vuetable-serializer)[ Packagist](https://packagist.org/packages/depsimon/fractal-vuetable-serializer)[ RSS](/packages/depsimon-fractal-vuetable-serializer/feed)WikiDiscussions master Synced 2mo ago

READMEChangelogDependenciesVersions (1)Used By (0)

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](https://github.com/ratiw/vuetable-2/) pagination.

About the VueTableSerializer
----------------------------

[](#about-the-vuetableserializer)

If you look into the source of [vuetable pagination](https://github.com/ratiw/vuetable-2/blob/master/src/components/VuetablePaginationMixin.vue) you can see what it expects to work.

```
{
    "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:

```
{
    "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.

Installation
------------

[](#installation)

You can install the package via composer:

```
composer require depsimon/fractal-vuetable-serializer
```

Usage
-----

[](#usage)

Use the VueTableSerializer in your backend code.

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

If you're using Laravel, I suggest you to use the [laravel-fractal](https://github.com/spatie/laravel-fractal) package that makes it really easy to use fractal. In this case you can use it like this :

```
$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.

```

    export default {
        data: function data() {
            return {
                fields: [
                    {
                        name: 'title',
                        title: 'Title'
                    },
                    {
                        name: 'author',
                        title: 'Author'
                    }
                ],
                paginationPath: 'meta.pagination',
                paginationComponent: 'vuetable-pagination'
            }
        },

        methods: {
            onLoadSuccess: function (response) {
                this.$refs.paginationInfo.setPaginationData(response.data);
            },
            onChangePage: function (page) {
                this.$refs.vuetable.changePage(page);
            },
            onPaginationData: function (tablePagination) {
                this.$refs.paginationInfo.setPaginationData(tablePagination);
                this.$refs.pagination.setPaginationData(tablePagination);
            }
        }
    }

```

###  Health Score

20

—

LowBetter than 14% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity8

Limited adoption so far

Community4

Small or concentrated contributor base

Maturity41

Maturing project, gaining track record

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

### Community

Maintainers

![](https://www.gravatar.com/avatar/376c58dc4d5f1208a8424fb24a2e74f65d2ae7bf2679e8601f21fffb11064897?d=identicon)[depsimon](/maintainers/depsimon)

### Embed Badge

![Health badge](/badges/depsimon-fractal-vuetable-serializer/health.svg)

```
[![Health](https://phpackages.com/badges/depsimon-fractal-vuetable-serializer/health.svg)](https://phpackages.com/packages/depsimon-fractal-vuetable-serializer)
```

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)