GitHub - vinayakkulkarni/laravel-vue-semantic-ui-pagination: A VueJS 2.x pagination used with Laravel & Semantic-UI :sunny: (original) (raw)

Laravel Vue Semantic-UI Pagination ⚡

• A Vue.js pagination component for Laravel paginators that works with Semantic-UI.
• This is on GitHub so let me know if I've b0rked it somewhere, give me a star ⭐ if you like it 🍻
• You can checkout the Demo

Requirements

• Vue.js 2.x
• Laravel 5.x
• Semantic-UI 2.x

✅ Install 👌

npm install laravel-vue-semantic-ui-pagination // or yarn add laravel-vue-semantic-ui-pagination

✅ Usage 🎓

Register the component globally:

Vue.component('pagination', require('laravel-vue-semantic-ui-pagination'));

Or use locally

import pagination from 'laravel-vue-semantic-ui-pagination';

✅ Example 🍀

Vue.component('example-component', {

data() {
    return {
        // Our data object that holds the Laravel paginator data
        laravelData: {},
    }
},

created() {
    // Fetch initial results
    this.getResults();
},

methods: {
    // Our method to GET results from a Laravel endpoint
    getResults(page) {
        if (typeof page === 'undefined') {
            page = 1;
        }

        // Using vue-resource as an example
        this.$http.get('example/results?page=' + page)
            .then(response => {
                return response.json();
            }).then(data => {
                this.laravelData = data;
            });
    }
}

});

✅ 📖 Props

{ current_page: 1, data: [], from: 1, last_page: 1, next_page_url: null, per_page: 10, prev_page_url: null, to: 1, total: 0, }

✅ 👂 Events

NPM