Файлы Bootstrap js не работают в пользовательском элементе API параметров vue 3

Я пытаюсь использовать Bootstrap 5 в пользовательском элементе Vue 3 Options Api. У меня возникли проблемы с правильной загрузкой начальной загрузки. Это мой main.ts файл:

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

и файл vue.config.js:

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/,
                },
            ],
        },
    },

};

и в моем App.ce.vue я также загружаю bootstrap.min.css, используя элемент Link в верхней части элемента template, но я загрузил соответствующую версию файла и обслуживаю ее со своего собственного сервера, и она работает:

<template>
  <link href = "<Link to bootstrap.min.css>" rel = "stylesheet"
    crossorigin = "anonymous">
- - - 
</template>

мой package.json файл:

{
  "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"
  }
}

Из-за ситуации с проектом я могу использовать только файл js из сборки.

Стили и классы Bootstrap работают благодаря элементу link, который загрузился bootstrap.min.css, но я не могу получить функциональность, например: я хочу использовать аккордеоны, и стили работают, но сами аккордеоны не работают, когда я нажимаю на них, не они открываются или закрываются.

Параметры поиска и Параметры отслеживания — это кнопки аккордеонов, но они только выглядят как кнопки и ничего не делают.

поскольку пользовательские элементы визуализируются в Shadow DOM, я не могу использовать ничего, кроме материалов проекта CE.

Я подтвердил, что в моем файле сборки есть загрузочный js-код, поскольку в моей сборке есть такой код вместе с некоторой функцией начальной загрузки:

/*!
  * 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

Это позволило мне подтвердить, что файл bootstrap.bundle.min.js был успешно загружен в проект. Не могу понять, почему нет функционала и не работают аккордеоны.

В основном эти два ответа: stackoverflow.com/a/78416154/8816585 Bootstrap сам по себе не будет подключаться к модели состояния VueJS, поскольку он предназначен для использования с собственными ванильными методами JS. Я рекомендую вам отказаться от Bootstrap и попробовать что-то более подходящее. Bootstrap для Vue3 может никогда не увидеть свет, учитывая очень медленный прогресс.

kissu 25.05.2024 16:11

@kissu Спасибо, я прочитал твои ответы. Думаю перейду на попутный ветер, так как работал с ним раньше. Если хотите, добавьте это как ответ, чтобы я мог отметить его как один.

purejoymind 26.05.2024 09:37
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
CSS: FlexBox
CSS: FlexBox
Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.
1
2
93
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

в вашем main.ts импортировать bootstrap.bundle.min надеюсь, это сработает

import 'bootstrap/dist/js/bootstrap.bundle.min.js'

Не изменит проблему. Vanilla JS не является государственной моделью VueJS.

kissu 26.05.2024 20:49
Ответ принят как подходящий

ОП решил использовать TailwindCSS вместо Bootstrap по этим причинам. Действительно, в проекте нет никаких обновлений относительно возможного использования VueJS v3, и в настоящее время существуют лучшие альтернативы с более гибким дизайном + с лучшей производительностью.

Другие вопросы по теме