Laravel + Inertia + Vuejs: Pagination - laravel

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.

Answer 1

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. 👍

Answer 2

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.