Skip to content

A Vue3 paginator component for the Laravel Jetstream/Breeze Inertia/Vue stack.

License

Notifications You must be signed in to change notification settings

svnwa/InertiaVuePaginator

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

13 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

InertiaVuePaginator

Latest Version on Packagist Total Downloads

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. SimplePaginator
  2. A "standard" paginator with feedback on the current and total amounts of the results, page numbers and arrows to navigate. Paginator

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

License

MIT. Please see the license file for more information.