A responsive and flexible pagination

        <b-field grouped group-multiline>
            <b-field label="Total">
                <b-input type="number" v-model="total"></b-input>
            <b-field label="Items per page">
                <b-input type="number" v-model="perPage"></b-input>
            <b-field label="Order">
                <b-select v-model="order">
                    <option value="">default</option>
                    <option value="is-centered">is-centered</option>
                    <option value="is-right">is-right</option>
            <b-field label="Size">
                <b-select v-model="size">
                    <option value="">default</option>
                    <option value="is-small">is-small</option>
                    <option value="is-medium">is-medium</option>
                    <option value="is-large">is-large</option>
        <div class="block">
            <b-switch v-model="isSimple">Simple</b-switch>
            <b-switch v-model="isRounded">Rounded</b-switch>

            aria-next-label="Next page"
            aria-previous-label="Previous page"
            aria-current-label="Current page">

    export default {
        data() {
            return {
                total: 200,
                current: 1,
                perPage: 20,
                order: '',
                size: '',
                isSimple: false,
                isRounded: false


totalTotal count of items Number
per-pageItems count for each page Number 20
currentCurrent page number, use the .sync modifier to make it two-way binding Number 1
orderButtons order, optional String is-centered, is-right
sizePagination size, optional String is-small, is-medium, is-large
simpleSimpler style Boolean false
icon-packIcon pack to use String mdi, fa, fas, far, fad, falmdi
aria-next-labelAccessibility label for the next page link. String
aria-previous-labelAccessibility label for the previous page link. String
aria-page-labelAccessibility label for the page link. If passed, this text will be prepended to the number of the page. String
aria-current-labelAccessibility label for the current page link. If passed, this text will be prepended to the current page. String

This page is open source. Noticed a typo or something's unclear?

Improve this page on GitHub