0

I am having a lot of trouble getting bootstrap-vue working. See the image of what happens when I copy and paste the navbar component from the boostrap-vue.js.org. Bits and pieces are missing and I don't understand why. When I create b-links I can create router links that work but they have zero styling. The primary button seems to be OK but then often buttons don't look correct and radios are invisible. Basically something is not right.

boostrap vue navbar example

vue navbar screenshot

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')
StrangeQuark
  • 13
  • 1
  • 7

1 Answers1

1

Make sure you have both vue-style-loader and css-loader in package.json

Check this post

Fifciuux
  • 766
  • 5
  • 8
  • 1
    I fixed it, I had both of those, the problem was for some reason when I installed bootstrap it installed bootstrap 4.0 and bootstrap-vue expected 4.1.3 – StrangeQuark Sep 23 '18 at 12:49
  • Finally found the answer thank you. The docs says that you just install it by running `npm install vue bootstrap bootstrap-vue` but that does not install the specific version bootstrap-vue needs. Right now it's bootstrap@4.5.3. – YoomarXD Sep 02 '21 at 22:12