Skip to main content
The Paginator.vue component is a reusable Vue.js component designed for paginating data fetched from a Laravel backend. It works seamlessly with the Laravel pagination structure, displaying pagination links in a visually appealing way. The component uses the @inertiajs/vue3 Link component to navigate between pages while preserving the SPA behavior.

​
Features

Laravel Pagination Support

Seamlessly handles the data structure returned by Laravel’s model pagination.

Dynamic Links

Automatically generates pagination links using the links prop.

Customizable Navigation

Includes options to preserve scroll state during navigation.

Responsive Design

Features full-width layout with height managed via CSS classes.

​
Usage

​
Basic Example

<template>
  <Paginator :links="paginator" />
</template>

<script setup>
import { Paginator } from '@robojuice/velure-ui';

const paginator = [
  {"url":null,"label":"&laquo;","active":false},
  {"url":"/","label":"1","active":true},
  {"url":"/?page=2","label":"2","active":false},
  {"url":"/?page=3","label":"3","active":false},
  {"url":"/?page=4","label":"4","active":false},
  {"url":"/?page=5","label":"5","active":false},
  {"url":null,"label":"...","active":false},
  {"url":"/?page=15","label":"15","active":false},
  {"url":"/?page=16","label":"16","active":false},
  {"url":"/?page=2","label":"&raquo;","active":false}
];
</script>

​
Props

​
links
array | object
default:"[]"
The array of pagination links, typically from Laravel’s pagination data.
​
preserveScroll
boolean
default:"false"
Whether to preserve the scroll position when navigating via links.
​
emitClickedLink
boolean
default:"false"
Whether to emit a click even vs allowing the link URL.

​
Events

​
click
event
Triggered when the user clicks a link and emitClickedLink is true.

​
Example with Laravel Data Structure

In your Laravel controller: 
use App\Models\Post;

public function index() {
    $posts = Post::paginate(10); // Laravel's pagination
    return Inertia::render('Posts/Index', [
        'posts' => $posts,
    ]);
}
The data structure returned by Laravel pagination: 
{
  "current_page": 1,
  "data": [...],
  "first_page_url": "http://example.com?page=1",
  "from": 1,
  "last_page": 16,
  "last_page_url": "http://example.com?page=16",
  "links": [
    {"url":null,"label":"&laquo; Previous","active":false},
    {"url":"http://example.com?page=1","label":"1","active":true},
    {"url":"http://example.com?page=2","label":"2","active":false},
    {"url":"http://example.com?page=3","label":"3","active":false},
    {"url":null,"label":"...","active":false},
    {"url":"http://example.com?page=16","label":"16","active":false},
    {"url":"http://example.com?page=2","label":"Next &raquo;","active":false}
  ],
  "next_page_url": "http://example.com?page=2",
  "path": "http://example.com",
  "per_page": 10,
  "prev_page_url": null,
  "to": 10,
  "total": 150
}
Pass the links field from the Laravel response to the Paginator component. From Inertia form the Laravel model: 
<template>
  <Paginator :links="$page.props.posts.links" />
</template>

​
Advanced Example with Scroll Preservation

<Paginator :links="$page.props.posts.links" :preserve-scroll="true" />

<Paginator emit-clicked-link @click="(link) => console.log(link)" :links="$page.props.posts.links" />

​
Notes

  • Responsive Design: The height of the paginator can be customized using CSS classes, while the width is set to 100%.
  • Preserve Scroll: The preserveScroll prop ensures the scroll position is maintained when navigating between pages.
  • Dynamic Rendering: The Paginator component automatically maps the links prop to clickable navigation buttons.
For further customization, refer to the component’s source code.