how to attach BootstrapVue to our vue.js project?

Admin 1
Viewed 129

I am using the Vue.js. I want to attach the Bootstrap-vue to my project but it is not working properly. When I attach BootstrapVue the black screen is shown and nothing functionalities will perform. Can anyone tell me how to solve the problem to attach Bootstrap-vue to my project?

bootstrap-vue vue.js
2 Answers

You can easily use it by adding a package bootstrap-vue in your project. For a demo purpose, I am adding a cdn link of bootstrap-vue in below demo.

Demo :

new Vue({
  el: "#app",
  data: {
    name: "Sitepoint"
  }
});
<script src="https://unpkg.com/vue@2.5.17/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.0.0-rc.11/dist/bootstrap-vue.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/bootstrap-vue@2.0.0-rc.11/dist/bootstrap-vue.css"/>
<link rel="stylesheet" href="https://unpkg.com/bootstrap@4.1.3/dist/css/bootstrap.min.css"/>
<div id='app'>
  <b-alert show> Hello {{ name }}! </b-alert>
</div>

user_41163000

I am adding package bootstrap-vue on vue-cli in my project. Or you can add a package with :

With npm

npm install vue bootstrap bootstrap-vue

With yarn

yarn add vue bootstrap bootstrap-vue

and dont forget to register BootstrapVue in your app entry point (App.js or Main.js)

user_168214960
Related