I recently set up a new webpack project using Vue and Bootstrap. However, it appears that the styling for bootstrap elements such as b-nav, b-nav-item, and b-badge is not displaying correctly. This issue seems to affect most other element types as well.
You can see the problem here: Vue-bootstrap does not render
Main template:
<div class="container-fluid">
<b-nav tabs>
<b-nav-item to="/lists">Verlanglijstjes</b-nav-item>
<b-nav-item to="/ownlist">Eigen lijstje</b-nav-item>
<b-nav-item to="/settings">Instellingen</b-nav-item>
<div class="pull-right">
<span>Ingelogd: {{ user }}, {{ household }}</span>
<b-button variant="link" @click="logOff"><icon name="sign-out" class="button-icon"></icon>Uitloggen</b-button>
</div>
</b-nav>
</div>
<div class="container">
<h1>Sinterklaas</h1>
<router-view/>
</div>
Child template:
<div>
<div v-for="item in items">
<b-badge @click="deleteItem(item)" variant="danger"><icon name="trash"></icon></b-badge>
<b-badge @click="editItem(item)" variant="primary"><icon name="pencil"></icon></b-badge>
<span>{{ item.description }}</span>
</div>
</div>
Main.js file:
import Vue from 'vue';
import VueCookie from 'vue-cookie';
import BootstrapVue from 'bootstrap-vue';
import Icon from 'vue-awesome/components/Icon';
import App from './App';
import router from './router';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap-vue/dist/bootstrap-vue.css';
import 'vue-awesome/icons';
Vue.use(BootstrapVue);
Vue.use(VueCookie);
Vue.component('icon', Icon);
Vue.config.productionTip = false;
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
template: '<App/>',
components: { App }
})