0

I'm using Bootstrap 5 for my Vue.js (version 3) project. The CSS (styling) of HTML elements works correctly, there is no issue with the CSS - it's imported and working correctly. The issue lies with the JavaScript functions that handle things like collapsing navbar, collapsing dropdown menus, etc. These functions do not work at all.

I installed Bootstrap 5 by using this command: npm install bootstrap

My App.vue has only this reference to the installed Bootstrap:

<style lang="scss">
@import "~bootstrap/";
</style>

My main.js looks like this:

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");

My index.html looks like this:

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
    <title>My new web title</title>
  </head>
  <body>
    <noscript>
      <strong
        >We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
        properly without JavaScript enabled. Please enable it to
        continue.</strong
      >
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

What am I missing here? How do I import not only the styles from the installed Bootstrap 5, but import the needed JS files as well?

P.S.: I do not want to use BootstrapVue package because it only supports Vue.js 2.x and not Vue.js 3, which I'm using in this project.

Thank you

neisor
  • 384
  • 4
  • 15
  • "These functions do not work at all." Are there any error messages showing in your developer tools ? – Fabian S. Oct 18 '21 at 09:57
  • No there are no error messages in the console/developer tools. It's just not working. No errors shown up, but the functionality does not work. – neisor Oct 18 '21 at 10:11
  • Can you provide an example of how you're attempting to use the Bootstrap JS? Are you using the `data-bs` attributes? – Carol Skelly Oct 18 '21 at 11:19

0 Answers0