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.
Once the project is created you can use the
npm run serve the command to run the project
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.
popper.js into the project.
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.
If you like our content, please consider buying me a coffee.
Thank you for your support!Buy me a coffee