Use recommended way for bootstrap-vue next

src/main.ts

@@ -2,7 +2,8 @@ import { createPinia, PiniaVuePlugin } from 'pinia';
 import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';
 import { createApp } from 'vue';
 import App from './App.vue';
-import { BootstrapVue3 } from './plugins/bootstrap-vue';
+// Eensure Bootstrap css still loads
+import './plugins/bootstrap-vue';
 import { GridLayout } from './plugins/vue-grid-layout';
 import router from './router';
 
@@ -14,7 +15,6 @@ pinia.use(piniaPluginPersistedstate);
 myApp.use(pinia);
 
 myApp.use(router);
-myApp.use(BootstrapVue3);
 myApp.use(GridLayout);
 
 // Vue.config.productionTip = false;

src/plugins/bootstrap-vue.ts

@@ -1,7 +1,4 @@
-import BootstrapVue3 from 'bootstrap-vue-next';
 import 'bootstrap/dist/css/bootstrap.css';
 import 'bootstrap-vue-next/dist/bootstrap-vue-next.css';
 
 import '@/styles/main.scss';
-
-export { BootstrapVue3 };

vite.config.js

@@ -4,13 +4,14 @@ import { resolve } from 'path';
 import Icons from 'unplugin-icons/vite';
 import Components from 'unplugin-vue-components/vite';
 import IconsResolve from 'unplugin-icons/resolver';
+import { BootstrapVueNextResolver } from 'unplugin-vue-components/resolvers';
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [
     createVuePlugin({}),
     Components({
-      resolvers: [IconsResolve()],
+      resolvers: [IconsResolve(), BootstrapVueNextResolver()],
       dirs: [],
       dts: true,
     }),