Vue.js bootsrap pagination not applying styles - laravel

Question

I'm currently working on a Vue.js component in my Laravel application, and I'm stuck on pagination. My pagination logic works like a charm, but the Bootstrap styles are not applied. This is my Vue.js component:
<template>
...
<div style="margin: auto; text-align: center;">
<pagination v-if="pagination.total > pagination.per_page"
:pagination="pagination" :callback="loadData"
:options="paginationOptions">
</pagination>
</div>
...
</template>
<script>
import pagination from 'vue-bootstrap-pagination';
export default {
components: {
pagination
},
pagination: {
total: 0,
per_page: 15, // required
current_page: 1, // required
last_page: 0, // required
from: 1,
to: 12
},
paginationOptions: {
offset: 4,
previousText: 'Previous',
nextText: 'Next',
alwaysShowPrevNext: true
},
...
</script>
As I said, my pagination works like a charm, but I have no styles to it. This is how it currently looks like:
Desired output would be something like this:

Answer 1

Based on our conversation above, it seems that the package you are using was written for Bootstrap 3, which has a slightly different pagination scheme.
I have updated the package Vue component with the proper class additions for Bootstrap 4. You can now use this component directly instead of loading the outdated package.
https://gist.github.com/matticustard/9e11277b2e4f32e8bfffa9a08e38f338
Pagination.vue
<template>
<nav>
<ul class="pagination" v-if="pagination.last_page > 0" :class="sizeClass">
<li class="page-item" v-if="showPrevious()" :class="{ 'disabled' : pagination.current_page <= 1 }">
<a href="#" class="page-link" v-if="pagination.current_page > 1 " :aria-label="config.ariaPrevioius" #click.prevent="changePage(pagination.current_page - 1)">
<span aria-hidden="true">{{ config.previousText }}</span>
</a>
</li>
<li class="page-item" v-for="num in array" :class="{ 'active' : num === pagination.current_page }">
{{ num }}
</li>
<li class="page-item" v-if="showNext()" :class="{ 'disabled' : pagination.current_page === pagination.last_page || pagination.last_page === 0 }">
<a href="#" class="page-link" v-if="pagination.current_page < pagination.last_page" :aria-label="config.ariaNext" #click.prevent="changePage(pagination.current_page + 1)">
<span aria-hidden="true">{{ config.nextText }}</span>
</a>
</li>
</ul>
</nav>
</template>
<script>
export default {
props: {
pagination: {
type: Object,
required: true,
},
callback: {
type: Function,
required: true,
},
options: {
type: Object,
},
size: {
type: String,
},
},
computed: {
array() {
if (this.pagination.last_page <= 0) {
return [];
}
let from = this.pagination.current_page - this.config.offset;
if (from < 1) {
from = 1;
}
let to = from + (this.config.offset * 2);
if (to >= this.pagination.last_page) {
to = this.pagination.last_page;
}
const arr = [];
while (from <= to) {
arr.push(from);
from += 1;
}
return arr;
},
config() {
return Object.assign({
offset: 3,
ariaPrevious: 'Previous',
ariaNext: 'Next',
previousText: '«',
nextText: '»',
alwaysShowPrevNext: false,
}, this.options);
},
sizeClass() {
if (this.size === 'large') {
return 'pagination-lg';
} else if (this.size === 'small') {
return 'pagination-sm';
}
return '';
},
},
watch: {
'pagination.per_page'(newVal, oldVal) { // eslint-disable-line
if (+newVal !== +oldVal) {
this.callback();
}
},
},
methods: {
showPrevious() {
return this.config.alwaysShowPrevNext || this.pagination.current_page > 1;
},
showNext() {
return this.config.alwaysShowPrevNext ||
this.pagination.current_page < this.pagination.last_page;
},
changePage(page) {
if (this.pagination.current_page === page) {
return;
}
this.$set(this.pagination, 'current_page', page);
this.callback();
},
},
};
</script>