How to Install Bootstrap library to Vue CLI Project

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.

creating new vue cli 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.

install bootstrap to vue project

Join my VueJS Newsletter

As I advance in my Journey of learning VueJS, I will be working on different exercises and challenges. Subscribe to receive the latest tutorials (every week) directly in your inbox.

    I won't send you spam. Unsubscribe at any time.

    Powered By ConvertKit

    Leave a reply:

    Your email address will not be published.

    Site Footer