How to add Bootstrap to Vue CLI project?

Sometimes, we want to add bootstrap to Vue CLI project.

In this article, we’ll look at how to add bootstrap to Vue CLI project.

How to add Bootstrap to Vue CLI project?

To add bootstrap to Vue CLI project, we can install the Bootstrap and jQuery packages and then import all the files from the packages.

To install the packages, we run

npm install bootstrap popper.js jquery

Then we import them in main.js by writing

import 'bootstrap/dist/css/bootstrap.min.css'
import 'jquery/src/jquery.js'
import 'bootstrap/dist/js/bootstrap.min.js'

Importing them in main.js will make them available in the whole app.

Conclusion

To add bootstrap to Vue CLI project, we can install the Bootstrap and jQuery packages and then import all the files from the packages.