vue3 cannot use bootstrap component

Question

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

Tolbxela · Accepted Answer · 2023-01-09 18:03:09Z

1

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.

answered Jan 9, 2023 at 18:03

Tolbxela

5,2193 gold badges23 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Raukaute · Accepted Answer · 2023-01-09 17:58:48Z

0

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

answered Jan 9, 2023 at 17:58

Raukaute

6516 silver badges12 bronze badges

Collectives™ on Stack Overflow

vue3 cannot use bootstrap component

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related