In vue bootstrap, b-table, b-form-input, etc. are normally compile. However, dynamic elements such as tooltip, sidebar, and carousel are not running.
This is my main.js:
import { createApp } from 'vue';
import App from './App.vue';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap';
import BootstrapVue3 from 'bootstrap-vue-3';
import 'bootstrap-vue-3/dist/bootstrap-vue-3.css';
import VCalendar from 'v-calendar';
import 'v-calendar/style.css';
import 'bootstrap-icons/font/bootstrap-icons.css';
import 'jquery';
import 'popper.js';
const app = createApp(App);
app.use(BootstrapVue3);
app.use(VCalendar, {});
app.mount('#app');
This is my package.json:
{
"name": "myproject",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"@popperjs/core": "^2.11.8",
"bootstrap": "^5.3.3",
"bootstrap-icons": "^1.11.3",
"bootstrap-vue": "^2.23.1",
"bootstrap-vue-3": "^0.5.1",
"core-js": "^3.8.3",
"jquery": "^3.7.1",
"popper.js": "^1.16.1",
"v-calendar": "^3.1.2",
"vue": "^3.4.21",
"vue-screen-utils": "^1.0.0-beta.13"
},
"devDependencies": {
"@babel/core": "^7.12.16",
"@babel/eslint-parser": "^7.12.16",
"@vue/cli-plugin-babel": "~5.0.0",
"@vue/cli-plugin-eslint": "~5.0.0",
"@vue/cli-service": "~5.0.0",
"eslint": "^7.32.0",
"eslint-plugin-vue": "^8.0.3"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/vue3-essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "@babel/eslint-parser"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead",
"not ie 11"
]
}
This is my Vue component’s style:
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:[email protected]&family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap');
@import url('bootstrap/dist/css/bootstrap.css');
@import url('bootstrap-vue/dist/bootstrap-vue.css');
@import url("https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css");
I continued to modify the import and proceed with installation and removal about bootstrap.