I am trying to use Bootstrap 5 in a Vue 3 Options Api custom element. I have been having issues with loading bootstrap correctly.
This is my main.ts
file:
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);
and the 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/,
},
],
},
},
};
and in my App.ce.vue
I am also loading bootstrap.min.css
using a Link element at the top of the template
element but I downloaded the respecting version of the file and I am serving it from my own server and it’s working:
<template>
<link href="<Link to bootstrap.min.css>" rel="stylesheet"
crossorigin="anonymous">
- - -
</template>
my package.json
file:
{
"name": "projectName",
"version": "1.0.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"preview": "vite preview"
},
"dependencies": {
"@vue/web-component-wrapper": "^1.3.0",
"@vueuse/core": "^10.5.0",
"bootstrap": "^5.3.3",
"vue-loader": "^16.8.2"
},
"devDependencies": {
"@vue/cli-plugin-typescript": "^5.0.8",
"@vue/cli-service": "~5.0.0",
"@vue/compiler-sfc": "^3.3.8",
"ts-loader": "^9.5.0",
"typescript": "^5.2.2",
"vue": "^3.3.4"
}
}
I can use only the js file from the build because of the projects situation.
The Bootstrap styles and classes work because of the link
element which loaded bootstrap.min.css
but I cannot get the functionality, for example: I want to use accordions and the styles work, but the accordions themselves don’t work when I click on them, non of them open or close.
Search parameters and Tracking parameters are the buttons for the accordions but they only look like buttons and don’t do anything.
since custom elements are rendered in a Shadow DOM, I can’t use anything other than the stuff in the CEs project.
I have confirmed that there are bootstrap js code in my build file as there are such code in my build along with some bootstrap function:
/*!
* Bootstrap v5.3.3 (https://getbootstrap.com/)
* Copyright 2011-2024 The Bootstrap Authors (https://github.com/twbs/bootstrap/graphs/contributors)
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
*/
/**
* --------------------------------------------------------------------------
* Bootstrap util/index.js
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
* --------------------------------------------------------------------------
*/
/**
* --------------------------------------------------------------------------
* Bootstrap dom/manipulator.js
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
* --------------------------------------------------------------------------
*/
/**
* --------------------------------------------------------------------------
* Bootstrap util/config.js
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
* --------------------------------------------------------------------------
*/
// and some more
This made me be able to approve that the bootstrap.bundle.min.js
file was loaded successfully within the project. I can’t figure out why the functionality isn’t there and the accordions aren’t working.
2
Answers
in your main.ts
import bootstrap.bundle.min
hopefully it works
OP decided to use TailwindCSS rather than Bootstrap because of those reasons. Indeed, the project does not have any updates regarding a possible VueJS v3 usage and there are better alternatives nowadays for a more flexible design + with better performance.