Laravel Pagination with VueJS
vue-laravel-paginex
will provide you ability to easily create pagination from Laravel Pagination object.
Installation
npm i vue-laravel-paginex
or
yarn add vue-laravel-paginex
Usage
First import the Pagination component inside your Vue component.
and define it
Then you'll be able to use pagination component.
Example:
:changePage
prop will run the function ( in our case is getData()
) when new page selected.
getData() function example with vue-resource.
this.data
object must be Laravel default or API Resource Pagination object.
Example:
or
Customizations
You can customize your pagination styles by overwriting default values. Available props for component:
Prop Name | Default Value |
containerClass | pagination |
buttonIcons | false |
prevButtonClass | page-item |
prevButtonText | Prev |
prevButtonIcon | fa fa-chevron-left |
nextButtonClass | page-item |
nextButtonText | Next |
nextButtonIcon | fa fa-chevron-right |
numberButtonClass | page-item |
numberClass | page-link |
numbersCountForShow | 2 |
activeClass | active |
Example:
You can use :options
prop by passing options object into it.
Example:
You have to define here only props which you want to overwrite.
Example:
You can set your own request params for request
Credits
Last updated