People searching “Laravel API resource pagination Vue” wrap a paginator and then read data.data or rebuild the links. When the collection is a paginator, Laravel keeps data, links, and meta. The API resource guide shows the shape. The pagination guide is what changes if you switch paginator.
TL;DR
- A resource collection of a paginator already includes links and meta.
- Do not paginate those rows again in Vue.
- Do not
PostResource::collection($posts->items()). - Do not paginate in Vue with the full collection loaded above the resource.
The fix#
$posts = Post::query()->orderBy('id')->paginate(12);
return PostResource::collection($posts);meta.last_page is present because this is paginate. A Vue page that only needs next and previous should not assume last_page after you switch to simplePaginate.
What to avoid#
Gotcha
Do not PostResource::collection($posts->items()). You dropped the links. Do not paginate in Vue with the full collection loaded above the resource. The page query is the paginator.
FAQ#
How do I paginate an API resource for Vue?
A resource collection of a paginator already includes links and meta. Do not paginate those rows again in Vue.
What goes wrong with Laravel API resource pagination Vue?
Many developers wrap a paginator and then read data. Do not PostResource::collection($posts->items())`.
