https://github.com/joseluisq/vue-vpaginator
Vue.js 2 + Bootstrap paginator component for Laravel Pagination response data.
https://github.com/joseluisq/vue-vpaginator
bootstrap component laravel pagination paginator vue
Last synced: 2 days ago
JSON representation
Vue.js 2 + Bootstrap paginator component for Laravel Pagination response data.
- Host: GitHub
- URL: https://github.com/joseluisq/vue-vpaginator
- Owner: joseluisq
- License: mit
- Archived: true
- Created: 2017-03-02T21:34:40.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2017-03-03T16:49:43.000Z (over 8 years ago)
- Last Synced: 2025-10-20T11:41:35.040Z (about 1 month ago)
- Topics: bootstrap, component, laravel, pagination, paginator, vue
- Language: Vue
- Size: 4.88 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- License: license.md
Awesome Lists containing this project
- awesome-vue-refactor - vue-vpaginator
README
# vue-vpaginator
> [Vue.js 2](https://vuejs.org/) + [Bootstrap]() paginator component for [Laravel Pagination](https://laravel.com/docs/5.4/pagination) response data.
## Install
```sh
npm install vue-vpaginator --save-dev
```
## Prerequisites
- [Vue.js 2](https://vuejs.org/)
- [jQuery](https://github.com/jquery/jquery)
- [jQuery BootPag](https://github.com/botmonster/jquery-bootpag)
- Some [Laravel Pagination](https://laravel.com/docs/5.4/pagination) result
## Usage
In your custom component:
`my-custom-component.vue`
```html
...
export default {
data () {
return {
myResponseData: {}
}
},
mounted () {
this.fetchMyServerData()
},
methods: {
/**
* Fetch my data from server
*/
fetchMyServerData (page = 1) {
// Fetching some data from server...
axios.get(`/api/v1/product/?page=${page}`)
.then(response => response.data)
.then(response => {
// Setting the response data (Laravel Pagination data)
this.myResponseData = response
// ...
})
}
}
}
```
In your entry app:
```js
const Vue = require('vue')
// jQuery
window.$ = window.jQuery = require('jquery')
// jQuery BootPag
// require using a path because it has not some main entry file
require('bootpag/lib/jquery.bootpag')
// require vpaginator
Vue.component('vpaginator', require('vue-vpaginator'))
// require your custom component
Vue.component('my-custom-component', require('./components/my-custom-component'))
const app = new Vue({
el: '#app'
})
```
_Make sure that your Laravel app returns a [Pagination](https://laravel.com/docs/5.4/pagination) data._
## Attributes
#### response
The response `data` name for store the [Laravel Pagination](https://laravel.com/docs/5.4/pagination) data. E.g. `v-bind:response="myResponseData"` or `:response="myResponseData"`.
## Events
#### @paginate (page)
It fires when some `page` number is clicked. You need to pass a callback (`method: ...`).
## License
MIT license
© 2017 [José Luis Quintana](http://git.io/joseluisq)