0

I have Bootstrap 5, an HTML theme with a CSS bundle file, and different JS bundle files (main JS bundle file and a plugin bundle file) that include the Bootstrap code base + custom template features.

I want to integrate all of these in a Vue 3 project so I can use the template in all my Vue components.

For the CSS part, I have easily imported the CSS bundle file in the App component with a global scope.

But how can I import the JS files? Do I have to import it into all my components? If so, how should I do this? One solution is to link to these files from index.html in the public folder, but then it is not included in the production build, and I get some errors even in development. Is there a simple strategy to integrate these JS bundles in my SRC folder?

nurmdrafi
  • 419
  • 4
  • 11
jeff3546
  • 175
  • 11

1 Answers1

0

Vue projects use a dependency manager such as NPM or Yarn that would be used to install Bootstrap JS as a module...

npm install --save bootstrap
npm install --save @popperjs/core

Then you can use Bootstrap anywhere in your Vue project...

import "bootstrap";

or import individual components...

import { Popover, Modal } from bootstrap;

Also see: Using Bootstrap 5 with Vue 3

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624