I can't figure out how to install and use bootstrap in Vue.js

Question

I just created a brand new project in Vue.js using the latest version and then I installed bootstrap to render a table but I keep getting the following error in the console:

Failed to resolve component: b-table

I couldn't figure out how to properly configure bootstrap even following Bootstrap's documentation. It says to do the following:

import Vue from 'vue'
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'

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

// Make BootstrapVue available throughout your project
Vue.use(BootstrapVue)
// Optionally install the BootstrapVue icon components plugin
Vue.use(IconsPlugin)

But i can't find a Vue component in 'vue'.

I'm using typescript so i have main.ts and not main.js

RESOLUTION

Looks like bootstrap like other components does not support vue3 entirely yet so vue made a component called @vue/compat to avoid breaking changes. I followed the Upgrade Workflow and i managed to make it work.

Did you followed that one? bootstrap-vue.org/vue3#prerequisites — kissu
– kissu, Commented Dec 29, 2022 at 17:14

kissu · Accepted Answer · 2022-12-29 18:51:12Z

1

I'm not sure that bootstrap-vue supports Vue3 entirely. Here is the most up to date comment to track the progress of that task: https://github.com/bootstrap-vue/bootstrap-vue/issues/5196#issuecomment-1290535214

You may consider maybe using another UI framework as of today.

answered Dec 29, 2022 at 18:51

kissu

47.3k16 gold badges94 silver badges197 bronze badges

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

1 Comment

Mazza Over a year ago

That's right, using @vue/compat seems to work

stapmoshun · Accepted Answer · 2023-09-19 21:48:23Z

-1

This is for vue3. First do npm install bootstrap-vue -S

then in main.js

import { BootstrapVue, BootstrapVueIcons } from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

then finally with your app variable,

app.use(BootstrapVue)
.use(BootstrapVueIcons)

This was taken from https://bootstrap-vue.org/docs#vue-cli-3 however it uses the old Vue.use syntax which is incorrect. Create an app variable if you haven't already before doing the .use method.

const app = createApp({
  // extend not necessary if you do not import App from App.vue
  extends: App
})

app.use()
.use() // so on and so forth...
.use()

answered Sep 19, 2023 at 21:48

stapmoshun

1341 silver badge7 bronze badges

1 Comment

kissu Over a year ago

Sure about the install -S part? You don't need it as a runtime dependency on production?

Collectives™ on Stack Overflow

I can't figure out how to install and use bootstrap in Vue.js

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related