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

- URL: https://laravel-vuejs.space/eloquent-api-resource-pagination-vue
- Author: Anass Ez-zouaine (https://laravel-vuejs.space/author/anass-ez-zouaine)
- Published: 2026-10-11
- Topics: Laravel, VueJs

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](https://laravel-vuejs.space/laravel-api-resources-vue) shows the shape. The [pagination guide](https://laravel-vuejs.space/laravel-vue-pagination) 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.
>
> **Who it's for:** Laravel + Vue developers
>
> **Applies to:** Laravel 13 · Vue 3

## The fix

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

**Q: 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.

**Q: What goes wrong with Laravel API resource pagination Vue?**

Many developers wrap a paginator and then read `data. Do not` PostResource::collection($posts->items())\`.