Having trouble incorporating Bootstrap 5 into a Vue 3 Options Api custom element? Check out my setup below:
import { defineCustomElement } from 'vue'
import 'bootstrap/dist/js/bootstrap.bundle'
import App from './App.ce.vue'
let element = defineCustomElement(App);
customElements.define("app-trackingsidebar", element);
Here's what I have in my vue.config.js file:
module.exports = {
productionSourceMap: true,
parallel: false,
css: {
extract: false,
},
configureWebpack: {
entry: './src/main.ts',
optimization: {
splitChunks: false,
minimize: false
},
resolve: {
extensions: ['.ts', '.tsx', '.vue', '.js', '.json'],
},
module: {
rules: [
{
test: /\.tsx?$/,
loader: 'ts-loader',
options: { appendTsSuffixTo: [/\.vue$/] },
exclude: /node_modules/,
},
],
},
},
};
In my App.ce.vue, I'm loading bootstrap.min.css using a Link element within the template:
<template>
<link href="<Link to bootstrap.min.css>" rel="stylesheet"
crossorigin="anonymous">
- - -
</template>
Check out my package.json for dependencies and project details along with only using the js file from the build due to certain constraints.
The styles are working but functionalities like accordions don't seem to be functioning properly. The accoridon buttons don't respond when clicked, even though Bootstrap is included correctly in the build file.
What could be causing this issue with functionality not working despite having the necessary Bootstrap code within the project?