Using Twitter Bootstrap 4 with Vue.js 2 App

In this article, we will setup the Vue.js 2 front-end app to use Twitter Bootstrap 4. The bootstrap-vue can be installed from NPM. We will also install the normal bootstrap package for styles.

npm install bootstrap-vue bootstrap --save

Register BootstrapVue in your app entrypoint (main.js):

import Vue from 'vue';
import BootstrapVue from 'bootstrap-vue';
import App from 'App.vue';

// Import the styles directly using style-loader. (Or you could add them via script tags.)
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap-vue/dist/bootstrap-vue.css';

Vue.use(BootstrapVue);

new Vue({
  el: '#app',
  render: h => h(App)
});

We don't need to include Bootstrap’s JS, interactivity is handled by the components. Start using Bootstrap in the template. Currently this fails with error message:

ERROR in ./~/bootstrap-vue/dist/bootstrap-vue.css
Module parse failed: /Users/bparanj/videos/blov/node_modules/bootstrap-vue/dist/bootstrap-vue.css Unexpected token (1:0)
You may need an appropriate loader to handle this file type.

ERROR in ./~/bootstrap/dist/css/bootstrap.css
Module parse failed: /Users/bparanj/videos/blov/node_modules/bootstrap/dist/css/bootstrap.css Unexpected token (7:5)
You may need an appropriate loader to handle this file type.

Only workaround is to use the CDN for Bootstrap 4 in the index.html. The installation has pulled in older version of bootstrap. You can see the git diff of the package.json:

+    "bootstrap": "^3.3.7",
+    "bootstrap-vue": "^0.16.1",

We will not use vue-bootstrap, so revert these files:

$ git checkout src/main.js
$ git checkout package.json 

Installing using npm as instructed in Bootstrap Home Page will pull in jQuery. We are not using jQuery in the app, it is used by bootstrap 4. Let's skip the download and use the Bootstrap CDN to deliver Bootstrap’s compiled CSS and JS in our project. In index.html file, add:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>

Edit the navigation bar to have the navigation bar:

<router-link to='/' tag='li' active-class='active'><a>Home</a></router-link>

The problem is this displays the navigation as links. You can hard-code the links by using the Bootstrap 4 navigation code from the docs:

<li class="nav-item active">
  <a class="nav-link" href="#">Home </a>
</li>
<li class="nav-item">
  <a class="nav-link" href="#">Link</a>
</li>

This will be translated to the vue-router link later. We can add the Twitter Bootstrap 4 navigation bar in Navigation.vue:

  <nav class="navbar navbar-toggleable-md navbar-light bg-faded">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav mr-auto">
        <router-link to='/' tag='li' active-class='nav-item active' exact><a class='nav-link'>Home</a></router-link>
        <router-link to='/articles' tag='li' active-class='nav-item active'><a class='nav-link'>Blog</a></router-link>
      </ul>
    </div>
  </nav>  

We have router-link tags that replaces the previously hard-coded navigation links. The exact option specifies that the home page should match '/' only. Otherwise, the Home tab will be selected even when the Blog tag is selected because, it also contains '/'. Finally, to style the table to use Twitter Bootstrap style table, we need to add class=table in the Blog.vue:

  <h1>My Blog</h1>     
  <table class="table">
    <thead>
      <tr>
        <th>id</th>
        <th>Title</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for='article in articles'>
        <td>{{article.id}}</td>
        <td>{{article.title}}</td>
      </tr>
    </tbody>
  </table>

Now you will have a functional navigation bar and table styled using Twitter Bootstrap 4.

References


Related Articles


Ace the Technical Interview

  • Easily find the gaps in your knowledge
  • Get customized lessons based on where you are
  • Take consistent action everyday
  • Builtin accountability to keep you on track
  • You will solve bigger problems over time
  • Get the job of your dreams

Take the 30 Day Coding Skills Challenge

Gain confidence to attend the interview

No spam ever. Unsubscribe anytime.