I am writing a Vue.js app with Bootstrap 4 and I can't loaded though I followed the documentation.
Added to main.js
Vue.use(BootstrapVue);
Added to css file related to App.vue:
@import '../../node_modules/bootstrap/dist/css/bootstrap.css';
@import '../../node_modules/bootstrap-vue/dist/bootstrap-vue.css';
Here is template:
<div class="main">
<div>
<b-modal id="modal1" title="Something went wrong" v-if="!serverStatusOk">
<p class="my-4">{{msg}}</p>
<p class="my-4">{{statusCode}}</p>
</b-modal>
</div>
<div>
<b-tab title="Players" active>
<br>Players data
</b-tab>
<b-tab title="Tournaments" active>
<br>Tournament data
</b-tab>
</div>
Result: no css rendered but in css file from dist dir I see Bootstrap What am I missing? The project created by vue-cli 3.0-beta
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.