vue.js - How to use bootstrap in vue

Question

I am trying to use Bootstrap in my Vue project. (created with the Vue cli)
I have installed the following things through npm.

• Bootstrap 4.6.0
• Popper.js 1.16.1
• Jquery 3.5.1

I have imported Bootsrap into my main.js

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

The problem is that I can't use the dropdowns in Bootsrap.
Is there anything else I should do?

question from:https://stackoverflow.com/questions/65844290/how-to-use-bootstrap-in-vue

Answer 1

there is bootstrap package specially for vue you can use the following commands to install it

npm install bootstrap-vue

OR

yarn add bootstrap-vue

and then in your main.js file you can import it and use it as

import BootstrapVue from 'bootstrap-vue';
import 'bootstrap-vue/dist/bootstrap-vue.css';

Vue.use(BootstrapVue)