Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/svnwa/inertiavuepaginator
A Vue3 paginator component for the Laravel Jetstream/Breeze Inertia/Vue stack.
https://github.com/svnwa/inertiavuepaginator
inertia inertiajs laravel laravel-framework paginator vue-component vue3 vuejs
Last synced: about 1 month ago
JSON representation
A Vue3 paginator component for the Laravel Jetstream/Breeze Inertia/Vue stack.
- Host: GitHub
- URL: https://github.com/svnwa/inertiavuepaginator
- Owner: svnwa
- License: mit
- Created: 2021-03-21T22:37:02.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2022-08-31T18:33:48.000Z (about 2 years ago)
- Last Synced: 2024-10-13T02:21:47.520Z (about 1 month ago)
- Topics: inertia, inertiajs, laravel, laravel-framework, paginator, vue-component, vue3, vuejs
- Language: Vue
- Homepage:
- Size: 24.4 KB
- Stars: 30
- Watchers: 3
- Forks: 9
- Open Issues: 4
-
Metadata Files:
- Readme: readme.md
- License: license.md
Awesome Lists containing this project
README
# InertiaVuePaginator
[![Latest Version on Packagist][ico-version]][link-packagist]
[![Total Downloads][ico-downloads]][link-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.
3. 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
``` bash
$ 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.
```
import Paginator from "@/Components/Paginator";
export default {
props: {
paginator: Object
},
}
```
OR
```
import SimplePaginator from "@/Components/SimplePaginator";
export default {
props: {
paginator: Object
},
}
```
**Done. The Rest is handled by the Vue component itself**
## Credits
- [Sven Walbröl][link-author]
## License
MIT. Please see the [license file](license.md) for more information.
[ico-version]: https://img.shields.io/packagist/v/svnwa/inertiavuepaginator.svg?style=flat-square
[ico-downloads]: https://img.shields.io/packagist/dt/svnwa/inertiavuepaginator.svg?style=flat-square
[ico-travis]: https://img.shields.io/travis/svnwa/inertiavuepaginator/master.svg?style=flat-square
[ico-styleci]: https://styleci.io/repos/12345678/shield
[link-packagist]: https://packagist.org/packages/svnwa/inertiavuepaginator
[link-downloads]: https://packagist.org/packages/svnwa/inertiavuepaginator
[link-travis]: https://travis-ci.org/svnwa/inertiavuepaginator
[link-styleci]: https://styleci.io/repos/12345678
[link-author]: https://github.com/svnwa
[link-contributors]: ../../contributors