vue3 cannot use bootstrap component-CodePudding

I'm in studying with Vuejs and I tried to use bootstrap/vue-boostrap component like Card or b-table but when I use them

[Vue warn]: Failed to resolve component: b-table If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. at

then I tried to import component in javascript and this what I got:

[plugin:vite:import-analysis] Failed to parse source for import analysis because the content contains invalid JS syntax. Install @vitejs/plugin-vue to handle .vue files.

So, I import @vitejs/plugin-vue according above, but it still got same. App.vue

  <header>toDoList</header>
  <b-table striped hover :items="list"></b-table>
  <input v-model="newTask">
  <input v-model="newTaskDate">
  <button @click="addnewTask()">add new Task</button>
</template>

<script>
import { BTable } from bootstrap-vue;
export default {
  data() {
    return {
      list: [{name:"Doing somwthing",date:"1"}],
      newTask: '',
      newTaskDate: ''
    }
  },
  methods: {
    addnewTask() {
      this.list.push({name:this.newTask, date:this.newTaskDate})
    }
  }
}
</script>

main.js

import App from './App.vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

import './assets/main.css'

createApp(App).mount('#app')

CodePudding user response：

BootstrapVue is not Vue 3 compatible at the time.
You can only use BootstrapVue with Vue 3 Migration Build.

Check the Vue.js 3.x initial support and be sure your configure your setup accordingly.

CodePudding user response：

Maybe it's a typo on your side, but what about this one? Note the quotes in the import statement.

import { BTable } from 'bootstrap-vue';