Setup BootstrapVue With Vue Cli

October 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>

vue-cli

I am using Vue via vue-cli.

I setup with

  • VueRouter
  • TypeScript
  • SCSS

Install

npm install bootstrap-vue

main.ts

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 = false

Vue.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.

index.html

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>

App.vue

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>

Home.vue

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>

References:

This work is licensed under a
Creative Commons Attribution-NonCommercial 4.0 International License.