5 Balloons

In this short tutorial, we will go over how we can add the Twitter Bootstrap frontend library to your Vue Projects.

Vue CLI is a very useful tool to get started with your Vue Projects.

For the demonstration of this post, I am creating a new Vue project using the CLI command

vue create vue-bootstrap

I am going with the preset options to create the project.

Once the project is created you can use the npm run serve the command to run the project

Installing Bootstrap

To install Bootstrap on your project run the following command

npm install bootstrap jquery popper.js

This will install the latest stable version of Bootstrap library and will also install the required dependencies of Bootstrap i.e. jquery and popper.js into the project.

However, if you are just looking to install the bootstrap styles and not bothered by the javascript provided by bootstrap then you can leave out jquery and popper.js dependencies.

Importing Bootstrap

Next up, you need to import the bootstrap library in your project to use it.

Open the file main.js located at project > src directory, and add the following lines.

import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css'

If you are just going to use the styles you can leave out the import bootstrap line and just import the minified CSS.

I included a simple alert component from bootstrap to HelloWorld.vue component to test if we have installed bootstrap correctly.

<div class="alert alert-success">This is a sweet success message</div>

And it works, we can see the bootstrap styles success alert.