Integrate bootstrapVue using TypeScript and Vue3

Question

use(BootstrapVue as any) can correct the following error but still in browser it doesn't work.

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

Error when 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')

Console in browser :

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 on main.js or main.ts add the following lines:

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