InertiaVuePaginator

These are two basic Paginator components that work with the Laravel Jetstream/Breeze Inertia/Vue3 stack.

1. A simple Paginator with just arrows left and right to paginate through Collection provided by e.g. the Inertia render function.
2. A "standard" paginator with feedback on the current and total amounts of the results, page numbers and arrows to navigate.

The components templates are analogous to the 'official' Blade templates provided by the basic paginator included by Laravel

Installation

Via Composer

$ composer require svnwa/inertiavuepaginator

Afterwards publish the Vue Components to use within your application

$ php artisan vendor:publish --tag=inertiavuepaginator

Usage

With Inertia just use the paginate() as you would in a PHP/Blade Laravel context. E.g.:

public function index()
{
    return Inertia::render('MyUserList',[
        'paginator' => User::paginate(10)
    ]);
}

In your Vue component (MyUserList.vue in this example) use the paginator prop provided by the Inertia render function and dynamically bind it to your Paginator component as you would with any other prop.

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

<script>
import Paginator from "@/Components/Paginator";
export default {
    props: {
            paginator: Object
        },
}
</script>

OR

<template>
    <SimplePaginator :paginator="paginator" />
</template>

<script>
import SimplePaginator from "@/Components/SimplePaginator";
export default {
    props: {
            paginator: Object
        },
}
</script>

Done. The Rest is handled by the Vue component itself

Credits

• Sven Walbröl

License

MIT. Please see the license file for more information.