Setup BootstrapVue With Vue Cli

Oct 22, 2019

If you plan to use Bootrap 4 directly without the convinience of Vue.js components, refer to Setup Bootstrap 4 With Vue Cli 3 Webpack.

Pros of BootstrapVue

  • No jQuery dependencies
  • All Bootstrap Components is a Vue.js component, so you can use vue.js syntax for data binding and event handling.

Cons of BootstrapVue

This following Bootstrap Dropdowns will render, but clicking on the button will not show the drop down.

<div class="dropdown">  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">    Dropdown button  </button>  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">    <a class="dropdown-item" href="#">Action</a>    <a class="dropdown-item" href="#">Another action</a>    <a class="dropdown-item" href="#">Something else here</a>  </div></div>

NOTE: If might be possible to hack it by including bootstrap.js and jQuery, but I didn't explore further.

NOTE: Normal Bootstrap syntax still works if no JavaScript interation is required, like Alerts.

Must use the BootstrapVue Dropdowns instead.

<div>  <b-dropdown id="dropdown-1" text="Dropdown Button" class="m-md-2">    <b-dropdown-item>Action</b-dropdown-item>    <b-dropdown-item>Another action</b-dropdown-item>    <b-dropdown-item>Something else here</b-dropdown-item>  </b-dropdown></div>


I am using Vue via vue-cli.

I setup with

  • VueRouter
  • TypeScript
  • SCSS


npm install bootstrap-vue


Edit main.ts.

import Vue from 'vue'import BootstrapVue from 'bootstrap-vue'import 'bootstrap/dist/css/bootstrap.css'import 'bootstrap-vue/dist/bootstrap-vue.css'import App from './App.vue'// import './registerServiceWorker'// import router from './router'Vue.config.productionTip = falseVue.use(BootstrapVue)new Vue({  router,  render: h => h(App)}).$mount('#app')

NOTE: There is a vue cli 3 plugin as well, but I didn't try it.


Edit public/index.html

  • Add <meta name="viewport">.
<!DOCTYPE html><html lang="en">  <head>    <meta charset="utf-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <!-- <meta name="viewport" content="width=device-width,initial-scale=1.0"> -->    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">    <link rel="icon" href="<%= BASE_URL %>favicon.ico">    <title>journey-static</title>  </head>  <body>    <noscript>      <strong>We're sorry but journey-static doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>    </noscript>    <!--    <div class="container">      <div id="app"></div>    </div>     -->    <div id="app"></div>    <!-- built files will be auto injected -->  </body></html>


Edit src/App.vue.

  • I put in Navbar with router-link support
<template>  <div id="app">    <b-navbar toggleable="lg" type="dark" variant="info">      <div class="container">        <!-- <b-navbar-brand href="/">Journey</b-navbar-brand> -->        <!-- use router-link -->        <b-navbar-brand to="/">Journey</b-navbar-brand>        <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>        <b-collapse id="nav-collapse" is-nav>          <b-navbar-nav>            <!-- <b-nav-item href="/about">About</b-nav-item> -->            <b-nav-item to="/about">About</b-nav-item>          </b-navbar-nav>        </b-collapse>      </div>    </b-navbar>    <!--    <div id="nav">      <router-link to="/">Home</router-link> |      <router-link to="/about">About</router-link>    </div>     -->    <div class="container" style="padding-top: 16px;">      <router-view/>    </div>  </div></template><style lang="scss">#app {  font-family: 'Avenir', Helvetica, Arial, sans-serif;  -webkit-font-smoothing: antialiased;  -moz-osx-font-smoothing: grayscale;  text-align: center;  color: #2c3e50;}/*#nav {  padding: 30px;  a {    font-weight: bold;    color: #2c3e50;    &.router-link-exact-active {      color: #42b983;    }  }} */</style>


Edit src/views/Home.vue.

<template>  <div class="home">    <div class="alert alert-primary" role="alert">      This is Home    </div>  </div></template><script>// @ is an alias to /src// import HelloWorld from '@/components/HelloWorld.vue'export default {  name: 'home',  components: {    // HelloWorld  }}</script>


❤️ Is this article helpful?

Buy me a coffee ☕ or support my work via PayPal to keep this space 🖖 and ad-free.

Do send some 💖 to @d_luaz or share this article.

✨ By Desmond Lua

A dream boy who enjoys making apps, travelling and making youtube videos. Follow me on @d_luaz

👶 Apps I built

Travelopy - discover travel places in Malaysia, Singapore, Taiwan, Japan.