I've been struggling to get bootstrap-vue up and running. Whenever I try to copy and paste the navbar component from boostrap-vue.js.org, parts of it are missing and I can't figure out why. While I manage to create router links with b-links that actually work, they lack any styling. The primary button looks fine initially, but other buttons often appear distorted and radios are invisible. Something just feels off.
Check out the boostrap vue navbar example
Here's a screenshot of the vue navbar issue
Package.json
"dependencies": {
"bootstrap": "^4.0.0-alpha.6",
"bootstrap-vue": "^2.0.0-rc.11",
"vue": "^2.5.17",
"vue-router": "^3.0.1",
"vuex": "^3.0.1"
},
"devDependencies": {
"@babel/core": "^7.1.0",
"@fortawesome/fontawesome-free": "^5.3.1",
"@vue/cli-plugin-babel": "^3.0.3",
"@vue/cli-plugin-eslint": "^3.0.3",
"@vue/cli-service": "^3.0.3",
"node-sass": "^4.9.3",
"sass-loader": "^7.1.0",
"vue-template-compiler": "^2.5.17"
Main.js
import Vue from 'vue';
import BootstrapVue from 'bootstrap-vue';
import App from './App.vue';
import router from './router';
import store from './store';
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap-vue/dist/bootstrap-vue.css';
Vue.use(BootstrapVue);
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')