Add Bootstrap to a Vue CLI project

Add Bootstrap to a Vue CLI project

The Vue CLI is a great tool to kick-start your Vue projects, however out of the box it has very little support in the way of design. Below is how you can quickly and easily add Bootstrap to your Vue CLI project in order to utilise its powerful styling features right from the beginning of development.

The quick version

In summary the below actions are required to set up Bootstrap in your Vue CLI project:

  1. > npm i bootstrap jquery popper.js
  2. Add the following to the src/main.js file:
    import 'bootstrap';
    import 'bootstrap/dist/css/bootstrap.min.css';

The slightly longer version

First of all if you haven’t already install Vue CLI version 3 you will need to install it using the Installation documentation:

> npm install -g @vue/cli

Once installed you should use the Creating a Project documentation to create your new project:

> vue create hello-world
? Please pick a preset: (Use arrow keys)
> default (babel, eslint)

In this example I have used the default preset which uses Babel and ESLint.

Once the app is created you should then move into your project directory and serve the app:

> cd hello-world
> npm run serve

This will serve your app on http://localhost:8080/ which should look like this:

Vue CLI default landing page

Now the app is ready for Bootstrap to be installed. To do this you should use the following command to install Bootstrap and its dependencies:

> npm install bootstrap jquery popper.js

Finally, import Bootstrap into the main script file by adding the following imports to the top of the hello-world/src/main.js file:

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

Bootstrap is now added to your project.

To test it simply add a Bootstrap component to your hello-world/src/components/HelloWorld.vue Vue component, such as a standard alert box using the following markup:

<div class="alert alert-primary" role="alert">
    A simple primary alert—check it out!
</div>

This will show in the app like this:

Vue CLI landing page with Bootstrap alert

In summary that is all that is required to add Bootstrap to your Vue project. Once done you can use the many front end advantages of Bootstrap to support your development right from the beginning of your project.


Useful links:

If you would like to discuss this article or have any other queries please contact me.