Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sourovroy/laravel-vue-bulma-pagination
Vue.js pagination component for Laravel pagination with Bulma.
https://github.com/sourovroy/laravel-vue-bulma-pagination
bulma laravel pagination vue
Last synced: 17 days ago
JSON representation
Vue.js pagination component for Laravel pagination with Bulma.
- Host: GitHub
- URL: https://github.com/sourovroy/laravel-vue-bulma-pagination
- Owner: sourovroy
- Created: 2017-11-15T07:23:32.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2017-11-15T10:38:20.000Z (about 7 years ago)
- Last Synced: 2024-04-24T20:03:13.694Z (9 months ago)
- Topics: bulma, laravel, pagination, vue
- Language: Vue
- Homepage:
- Size: 15.6 KB
- Stars: 0
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Laravel Vue Bulma Pagination
Vue.js pagination component for Laravel pagination with Bulma.
## Requirements
* [Vue.js](https://vuejs.org/)
* [Laravel](http://laravel.com/docs/)
* [Bulma](https://bulma.io/documentation/overview/start/)
## Install
```bash
npm install laravel-vue-bulma-pagination
```
## Usage
Controller method:
```php
$tagsData = Tag::paginate(10);
return response()->json([
'success' => true,
'tagsData' => $tagsData
]);
```
Register the component:
```javascript
import pagination from 'laravel-vue-bulma-pagination';
export default {
components: {
pagination
}
}
```
or globaly
```javascript
Vue.component('pagination', require('laravel-vue-bulma-pagination'));
```
Use the component:
```html
{{ tag.id }}
{{ tag.name }}
```
```javascript
export default {
data: () => ({
tags: [],
tagsData: {}
}),
methods: {
getTagsList(page){
var vm = this;
if(page == undefined){
var pageUrl = '/admin/posts/tags/list';
}else{
var pageUrl = '/admin/posts/tags/list?page=' + page;
}
axios.get(pageUrl).then(function(response){
if(response.data.hasOwnProperty('success')){
vm.tagsData = response.data.tagsData;
vm.tags = response.data.tagsData.data;
}
}).catch(function(error){
console.log(error);
});
}
}
}
```
### Props
| Name | Type | Description |
| --- | --- | --- |
| `pagedata` | Object | An object contains the value of a [Laravel pagination](https://laravel.com/docs/5.5/pagination#paginating-eloquent-results) response. |
### Events
| Name | Description |
| --- | --- |
| `page-clicked` | Triggered when a user changes page. Passes the new `page` number as a parameter. |
## Credits
I got inspired by seeing this repository [laravel-vue-pagination](https://github.com/gilbitron/laravel-vue-pagination).
Released under the MIT license.
## Screenshot
