Integrating Bootstrap with Vue.js using Bootstrap-Vue

Category: Bootstrap, bootstrap-hub, Bootstrap-tutorials, bootstrap-vue, CSS, HTML & CSS, JavaScript, vue.js

In this article, we’ll explore how to integrate Bootstrap with Vue.js using Bootstrap-Vue.

React and Vue.js are two leading, modern JavaScript frameworks for front-end development. While React has a steep learning curve, a complex build process (if you’re coming from a jQuery world), all you need to do to start using Vue.js is a simple import script:

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>

Bootstrap has become a popular HTML/CSS framework for building mobile responsive websites. However, it relies mostly on jQuery for its core features as well as its extensive list of components — such as alerts, and modals. So we’ll explore how to use Bootstrap with Vue.js, thereby removing the need for jQuery.

Introducing Bootstrap

Originally created in late 2011 by Mark Otto and Jacob Thornton at Twitter Inc., Bootstrap soon found popularity outside Twitter after being open-sourced. It continued to grow as the fastest front-end framework for web developers worldwide.

Today, Bootstrap has become the de-facto standard for starting a new website project, with its CSS and JS architecture providing mobile responsive and common UI components, along with support for most modern browsers.

Connecting Bootstrap with Vue.js

As we mentioned earlier, using with Bootstrap with Vue.js is slightly tricky, because of Bootstrap’s dynamic components’ heavy dependency on jQuery. However, there are at least a couple of good projects (very early builds, so don’t expect everything to be tried and tested) that are in the process of bridging that gap:

We’ll explore the first option here, Bootstrap-Vue, since it’s the most updated and popular project.

Bootstrap-Vue

Bootstrap-Vue not only supports the Bootstrap components and grid system, but also includes support for Vue.js Directives, which gives us the full feature-set from the Vue.js ecosystem.

One of the cool features of Bootstrap-Vue is that it has an online Playground. This playground is hot-reloaded and also lets us export our code to JSFiddle. Isn’t that cool!

I believe a good documentation and developer ecosystem is necessary for the success of any software project and Bootstrap-Vue ticks all the checkboxes.

Getting Started with Bootstrap-Vue Using the Command Line

If you’ve been following modern web development trends, you’d definitely know about npm and installing libraries with it. Bootstrap-Vue can be installed with npm through the following command:

npm i bootstrap-vue

Bootstrap-Vue also provides two vue-cli templates that can scaffold our projects without too much hassle:

Webpack Simple: quick scaffold for a small application.
Webpack: for larger production capable projects.

First, we install the vue-cli by:

npm i -g vue-cli

Then, we initialize our project — let’s call it getting-started — using the webpack-simple template by typing the following in the terminal:

$ vue init bootstrap-vue/webpack-simple getting-started

$ cd getting-started
$ npm install
$ npm run dev

Let’s look at this code line by line:

The first line starts with vue init creates a new directory called getting-started, where a new Bootstrap-Vue project is initialized.
With cd getting-started, we access the new project’s directory.
npm install takes care of installing all the project’s dependencies.
Finally, with npm run dev, the app is compiled and launched in the browser.

Your local environment should now contain the following files and folders:

├── index.html
├── node_modules
├── README.md
├── package.json
├── src
│   ├── App.vue
│   ├── assets
        ├── logo.png
│   ├── main.js
└── webpack.config.js

Here, App.vue and main.js are the primary files of interest. If we fire up our text editor and open main.js, we’ll see the following code, which imports the Bootstrap stylesheet and Bootstrap-Vue:

import Vue from 'vue'
import BootstrapVue from "bootstrap-vue"
import App from './App.vue'
import "bootstrap/dist/css/bootstrap.min.css"
import "bootstrap-vue/dist/bootstrap-vue.css"

Vue.use(BootstrapVue)

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

At the same time, the App.vue document loads up the front-end code.

After running the npm run dev command, the project’s index.html page should render a page like the one below:

Vue.js splash page

Importing Bootstrap-Vue with a `script` Tag in the Document `<head>` Section

While we saw the npm way of installing and working with Bootstrap-Vue, let’s also look at the simpler option: including Bootstrap-Vue using a script tag in the <head> section of our HTML document:

<!-- Add Bootstrap, Bootstrap-Vue CSS, Vue,
Babel, and Bootstrap-Vue JS to the <head> section -->
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css"/>
<link type="text/css" rel="stylesheet" href="//unpkg.com/[email protected]/dist/bootstrap-vue.css"/>

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<!-- Add this after vue.js -->
<script src="//unpkg.com/[email protected]/dist/polyfill.min.js"></script>
<script src="//unpkg.com/[email protected]/dist/bootstrap-vue.js"></script>

Now we can work with Vue.js, Bootstrap, and Vue-Bootstrap on our local machine.

Working With Bootstrap-Vue Components

For the demos in this article, we’ll use CodePen. To set it up, let’s create our Pen, click on the settings icon, and import the following CSS in the CSS tab:

https://unpkg.com/[email protected]/dist/css/bootstrap.min.css

https://unpkg.com/[email protected]/dist/bootstrap-vue.css

CodePen CSS settings

In the Javascript tab, let’s import the Vue and Bootstrap Vue libraries:

https://unpkg.com/[email protected]/dist/vue.min.js

https://unpkg.com/[email protected]/dist/bootstrap-vue.js

CodePen JavaScript settings

Finally, let’s click the Save & Close button. Now we’re ready to start playing with Bootstrap-Vue components.

Continue reading %Integrating Bootstrap with Vue.js using Bootstrap-Vue%

blog