Laravel + Inertia + Vuejs: Pagination

Question

When I get all the records it works:

    ...

    $items = Item::all();

    return Inertia::render('Rentals/Items', ['items' => $items]
);

But when I try to paginate, it breaks down:

    ...

    $items = Item::paginate(15);

    return Inertia::render('Rentals/Items', ['items' => $items]
);

I get this error:

Uncaught (in promise) TypeError: Cannot read property 'id' of null

Help please. What am I doing wrong? I've been stuck for days.

Standard pagination with Laravel wont work with Inertia.js. Does one of the answers here may help you?: https://stackoverflow.com/questions/61076083/paginate-results-with-vue-js-inertia-js-and-laravel — Andrew, Mar 30 '21 at 01:42

score 58 · Accepted Answer · edited Feb 20 '22 at 22:17

Creator of Inertia.js here.

So, you can totally use the Laravel paginator with Inertia, you just need to setup your page components to be compatible.

First, make sure you're only returning the items data to the client that you actually need. You can use the new pagination through method for this.

$items = Item::paginate(15)->through(function ($item) {
    return [
        'id' => $item->id,
        'name' => $item->name,
        // etc
    ];
});

return Inertia::render('Rentals/Items', ['items' => $items]);

Next, client side, you'll need a pagination component to actually display the pagination links. Here is an example component from the Ping CRM demo app, built using Tailwind CSS.

<template>
  <div v-if="links.length > 3">
    <div class="flex flex-wrap -mb-1">
      <template v-for="(link, key) in links">
        <div v-if="link.url === null" :key="key" class="mr-1 mb-1 px-4 py-3 text-sm leading-4 text-gray-400 border rounded" v-html="link.label" />
        <inertia-link v-else :key="key" class="mr-1 mb-1 px-4 py-3 text-sm leading-4 border rounded hover:bg-white focus:border-indigo-500 focus:text-indigo-500" :class="{ 'bg-white': link.active }" :href="link.url" v-html="link.label" />
      </template>
    </div>
  </div>
</template>

<script>
import {InertiaLink} from "@inertiajs/inertia-vue3";

export default {
  props: {
    links: Array,
  },
  components : {
    InertiaLink
  }
}
</script>

Finally, to display the items and the pagination links in your page component, use the items.data and items.links props. Something like this:

<template>
  <div>
    <div v-for="item in items.data" :key="item.id">
      {{ item.name }}
    </div>
    <pagination :links="items.links" />
  </div>
</template>

<script>
import Pagination from '@/Shared/Pagination'

export default {
  components: {
    Pagination,
  },
  props: {
    items: Object,
  },
}
</script>

You can find a full working example of this in the Ping CRM demo app.

Hi @Jonathan with your code, when i'm compile pagination component i got `VueCompilerError: v-if/else branches must use unique keys`. I'm using vue 3 — Bhazk, Apr 06 '21 at 01:26
@AdiMadhava Place the `:key="key"` attribute on the same element as the `v-for` instead of its children. — robvankeilegom, Sep 28 '21 at 10:33

score 5 · Answer 2 · answered Jan 19 '22 at 15:36

Just to keep this post updated I'm adding what works for me using vue 3, laravel 8 and inertia 0.10:

In Pagination component I must change the :key attribute just as @AdiMadhava said before, in addition I must use Link component in order to make the page links usables, so my entire @/Shared/Pagination.vue looks like:

<template>
    <div v-if="links.length > 3">
        <div class="flex flex-wrap mt-8">
            <template v-for="(link, key) in links" :key="key">
                <div
                    v-if="link.url === null"
                    class="mr-1 mb-1 px-4 py-3 text-sm leading-4 text-gray-400 border rounded"
                    v-html="link.label"
                />

                <Link
                    v-else
                    class="mr-1 mb-1 px-4 py-3 text-sm leading-4 border rounded hover:bg-white focus:border-primary focus:text-primary"
                    :class="{ 'bg-white': link.active }"
                    :href="link.url"
                    v-html="link.label"
                />
            </template>
        </div>
    </div>
</template>

<script>
import { defineComponent } from "vue";
import { Link } from "@inertiajs/inertia-vue3";
export default defineComponent({
    components: {
        Link,
    },
    props: {
        links: Array,
    },
});
</script>

And it works accurately.

Laravel + Inertia + Vuejs: Pagination

2 Answers2