erro while using bootstrap-vue in vue3 project - vue.js

Question

I am working on bootstrap-vue but I cannot add the functionalities of bootstrap. the code of main.js is
import { createApp } from 'vue'
import App from './App.vue'
import "bootstrap/dist/css/bootstrap.css"
import"bootstrap-vue/dist/bootstrap-vue.css"
createApp(App).mount('#app')
and the code of Helloworld.vue file is
<template>
<div>
<h1>hello from helloworld</h1>
<h5>Pressed and un-pressed state</h5>
<b-button :pressed="true" variant="success">Always Pressed</b-button>
<b-button :pressed="false" variant="success">Not Pressed</b-button>
<h5 class="mt-3">Toggleable Button</h5>
<b-button :v-bind="myToggle" variant="primary">Toggle Me</b-button>
<p>Pressed State: <strong>{{ myToggle }}</strong></p>
<h5>In a button group</h5>
<b-button-group size="sm">
<b-button
v-for="(btn, idx) in buttons"
:key="idx"
:v-bind="btn.state"
variant="primary"
>
{{ btn.caption }}
</b-button>
</b-button-group>
<p>Pressed States: <strong>{{ btnStates }}</strong></p>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
},
data() {
return {
myToggle: false,
buttons: [
{ caption: 'Toggle 1', state: true },
{ caption: 'Toggle 2', state: false },
{ caption: 'Toggle 3', state: true },
{ caption: 'Toggle 4', state: false }
]
}
},
computed: {
btnStates() {
return this.buttons.map(btn => btn.state)
}
}
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
what I do to implement the bootstrap-vue in this project

Answer 1

In your main.js file you are missing bootstrap-vue import. Try the below for vue3, it worked for me. Please note: create a const for app.
import { createApp } from 'vue'
import BootstrapVue3 from 'bootstrap-vue-3'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
import App from './App.vue'
const app = createApp(App)
app.use(BootstrapVue3)
app.mount('#app')