Bootstrap-vue doesn't load CSS

Try importing the files using JavaScript.

import 'bootstrap/dist/css/bootstrap.css'import 'bootstrap-vue/dist/bootstrap-vue.css'

On closer inspection it looks like you're missing <b-tabs>
also <b-modal> is controlled by v-model

<div class="main">    <div>        <b-modal id="modal1" title="Something went wrong" v-model="errorModal">            <pre class="my-4">{{ msg }}</pre>            <p class="my-4">{{ statusCode }}</p>        </b-modal>    </div>    <!-- Make sure to wrap b-tab in b-tabs -->    <b-tabs>         <b-tab title="Players" active>                <br>Players data        </b-tab>        <b-tab title="Tournaments">                <br>Tournament data        </b-tab>    </b-tabs></div>

That should fix the styling of the tabs.

I came across this same issue, but luckily I found the cause: The loader is not loaded :)

1. Make sure you have both vue-style-loader and css-loader in package.json
2. Then in your webpack config, your module.rules should have this object:

   {  test: /\.css/,  use: ['vue-style-loader', 'css-loader'] // BOTH are needed!}

3. And in your App.vue, under the <script> section, you should import:

   import "bootstrap/dist/css/bootstrap.min.css";import "bootstrap-vue/dist/bootstrap-vue.css";

No need to use @ or relative node_modules paths or anything.

With these changes, it worked for me with Vue 2.5 and Bootstrap-Vue 2.0.0

Update:

Also, even though it feels a bit counter-intuitive, make sure you use() the Bootstrap-Vue package BEFORE you create the new Vue() in main.js. For example:

import Vue from 'vue';import BootstrapVue from 'bootstrap-vue';import App from './App';import router from './router';Vue.use(BootstrapVue);new Vue({  el: '#app',  router,  components: { App },  render: h => h(App),});

If you do it in reverse order, it works only partially. For example some block elements will not have styles applied.

import Vue from 'vue';import BootstrapVue from 'bootstrap-vue';import App from './App';import router from './router';new Vue({  el: '#app',  router,  components: { App },  render: h => h(App),});// Doing this after new Vue() will NOT work correctly:Vue.use(BootstrapVue);

For new people facing above issue. None of the above answers worked for me. My problem was with installed bootstrap version. npm installled lastest version 5.1.0 which does not work with bootstrap-vue. I had to downgrade bootstrap to 4.5.3 (recommended version from website)

run followingnpm install bootstrap@4.5.3 --save