skip to Main Content

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.

enter image description here

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


  1. in your main.ts
    import bootstrap.bundle.min
    hopefully it works

    import 'bootstrap/dist/js/bootstrap.bundle.min.js'
    
    Login or Signup to reply.
  2. 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.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search