Implement bootstrapVue integration of TypeScript and Vue3

Question

Using use(BootstrapVue as any) fixes the following error, but it still doesn't work in the browser.

main.ts：

import { createApp }from 'vue';
import App from './App.vue';
import router from './router';
import Release from './components/Release.vue'; // @ is an alias to /src
import {BootstrapVue} from 'bootstrap-vue';
//import Vuelidate from 'vuelidate'

// Import Bootstrap an BootstrapVue CSS files (order is important)
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'


// Optionally install the BootstrapVue icon components plugin
//use(BootstrapVue as any) can correct.
createApp(App).use(BootstrapVue).component('Release', Release)
.use(router).mount('#app')

运行 npm run serve 时出现错误：

WAIT  Compiling...                                                                                         9:57:17 AM

98% after emitting CopyPlugin

 WARNING  Compiled with 1 warning                                                                           9:57:18 AM

 warning  in ./node_modules/bootstrap-vue/esm/vue.js

"export 'default' (reexported as 'Vue') was not found in 'vue'


  App running at:
  - Local:   http://localhost:8080/ 

Issues checking in progress...
ERROR in src/main.ts:15:20
TS2345: Argument of type 'BootstrapVuePlugin' is not assignable to parameter of type 'Plugin_2'.
  Type 'BootstrapVuePlugin' is not assignable to type '{ install: PluginInstallFunction; }'.
    Types of property 'install' are incompatible.
      Type 'PluginFunction<BvConfigOptions>' is not assignable to type 'PluginInstallFunction'.
        Types of parameters 'Vue' and 'app' are incompatible.
          Type 'App<any>' is missing the following properties from type 'VueConstructor<Vue>': extend, nextTick, set, delete, and 3 more.
    13 | // Optionally install the BootstrapVue icon components plugin
    14 | //Vue.use(IconsPlugin).use(BootstrapVue as any)
  > 15 | createApp(App).use(BootstrapVue).component('Release', Release)
       |                    ^^^^^^^^^^^^
    16 | .use(router).mount('#app')

浏览器控制台输出：

Uncaught TypeError: Cannot read property 'prototype' of undefined
    at eval (config.js?228e:6)
    at Module../node_modules/bootstrap-vue/esm/utils/config.js (chunk-vendors.js:3924)
    at __webpack_require__ (app.js:849)
    at fn (app.js:151)
    at eval (props.js?cf75:1)
    at Module../node_modules/bootstrap-vue/esm/utils/props.js (chunk-vendors.js:4200)
    at __webpack_require__ (app.js:849)
    at fn (app.js:151)
    at eval (model.js?58f2:1)
    at Module../node_modules/bootstrap-vue/esm/utils/model.js (chunk-vendors.js:4116)

Answer 1

You need to install bootstrap-vue-3

RUN npm i --save bootstrap-vue-3

Then add the following code in main.js or main.ts:

//bootstrap vue
import BootstrapVue3 from 'bootstrap-vue-3';
app.use(BootstrapVue3);