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

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.

CodePudding user response：

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.