CODEWITHSUNDEEP
vue.jsbootstrap-5
Mazza
Mazza

Reputation: 27

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

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.

Upvotes: 1

Views: 1361

Answers (2)

stapmoshun
stapmoshun

Reputation: 134

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

Upvotes: -1

kissu
kissu

Reputation: 46814

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.

Upvotes: 1

Related Questions