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:
> npm i bootstrap jquery popper.js
- Add the following to the
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)
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:
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
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:
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.
If you would like to discuss this article or have any other queries please contact me.