0

I use bootstrap 5 and vue3 . I imported both CSS and JS file in main.js and CSSfile is working fine but js file is not working. The main.js file is below :

``
 import 'bootstrap/dist/css/bootstrap.rtl.min.css';
 import 'bootstrap/dist/js/bootstrap.min.js';
``
iman hosseingholizadeh
  • 11
  • 2
  • 4

2 Answers2

0

In main.js, just use below importing code:

import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap";
Ryan
  • 19,118
  • 10
  • 37
  • 53
  • I've used it but it is not working – iman hosseingholizadeh Jan 13 '22 at 10:03
  • @imanhosseingholizadeh Refer to https://stackoverflow.com/a/65555991/10158551. You'd better add more info including your scenario,code,result... a reproducible demo is preferred. – Ryan Jan 14 '22 at 01:30
  • I've used a slider and the slides change automatically but the arrows is not working. Means when I click on arrow to change the slides it is not working. – iman hosseingholizadeh Jan 15 '22 at 07:08
  • @imanhosseingholizadeh could not reproduce your problem when I add [carousel](https://getbootstrap.com/docs/5.0/components/carousel/#with-controls) it also works.Could you also try `import 'bootstrap/dist/js/bootstrap.bundle.js'` or provide a reproducible demo on sandbox/codepen if necessary – Ryan Jan 15 '22 at 13:04
0

make sure to install popper js core also

npm i bootstrap
npm i @popperjs/core

Your main.js file should look something like this

import 'bootstrap/dist/css/bootstrap.css'
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
createApp(App).use(store).use(router).mount('#app');
import 'bootstrap/dist/js/bootstrap.js'
Iyed Lh
  • 1