resources/js/Components/Pagination.vue Component accepts two parameters:
  • data: Pagination data (total, per page and current page). You can use helper method get_pagination_data to get pagination data.
  • target:
  • variant: You can render default or simple pagination. Simple pagination will have previous and next buttons and current page indicator, while the default one has multiple page numbers.
  • target: ID of the data section. Required to scroll to the start on page change.
$data = Post::latest()->paginate(12);

return Inertia::render('Blog', [
    'posts' => $data->items(), // Pass only items from paginated object
    'meta' => [
        // title, description and other meta data, ...
        'pagination' => get_pagination_data($data),
    ],
]);

<Pagination :data="meta.pagination" target="#blog" />

<Pagination :data="meta.pagination" target="#blog" variant="simple" />