using bootstrap-vue in vuejs3 project doesnt compile successfully

Question

I am doing a vue3 application which uses bootstrap-vue. I created a vuejs3 project with vue create and later installed boostrap-vue with npm install bootstrap-vue@latest . I created my App.vue from a opensource application vue-admin-template. I modified my main.js as below:

My src/main.js

import { createApp } from 'vue';
import App from './App.vue';
import router from './router'; // Import the router configuration
import store from './store';   // Import the store configuration

import 'bootstrap/dist/css/bootstrap.css'; // Import Bootstrap CSS
import 'bootstrap-vue/dist/bootstrap-vue.css'; // Import BootstrapVue CSS
import { BootstrapVue } from 'bootstrap-vue'; // Import BootstrapVue

createApp(App)
  .use(router) // Use the router
  .use(store)  // Use the store
  .use(BootstrapVue)
  .mount('#app');

My App.vue

<template>
  <div>
    <template v-if="!$route.meta.allowAnonymous">
      <v-app id="inspire">
        <div class="app-container">
          <toolbar @toggleNavigationBar="drawer = !drawer"/>
          <navigation :toggle="drawer"/>
          <v-content>
            <breadcrumbs />
            <router-view/>
            <page-footer />
          </v-content>
        </div>
      </v-app>
    </template>
    <template v-else>
      <transition>
        <keep-alive>
          <router-view></router-view>
        </keep-alive>
      </transition>
    </template>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      drawer: true
    }
  }
}
</script>

<style>
  .v-btn:hover:before{
    color: transparent !important;
  }
</style>

I get the following warnings in vue console:

WARNING  Compiled with 2 warnings                                                                                                                           3:25:29 pm

 warning  in ./node_modules/bootstrap-vue/esm/vue.js

export 'default' (imported as 'Vue') was not found in 'vue' (possible exports: BaseTransition, BaseTransitionPropsValidators, Comment, EffectScope, Fragment, KeepAlive, ReactiveEffect, Static, Suspense, Teleport, Text, Transition, TransitionGroup, VueElement, assertNumber, callWithAsyncErrorHandling, callWithErrorHandling, camelize, capitalize, cloneVNode, compatUtils, compile, computed, createApp, createBlock, createCommentVNode, createElementBlock, createElementVNode, createHydrationRenderer, createPropsRestProxy, createRenderer, createSSRApp, createSlots, createStaticVNode, createTextVNode, createVNode, customRef, defineAsyncComponent, defineComponent, defineCustomElement, defineEmits, defineExpose, defineModel, defineOptions, defineProps, defineSSRCustomElement, defineSlots, devtools, effect, effectScope, getCurrentInstance, getCurrentScope, getTransitionRawChildren, guardReactiveProps, h, handleError, hasInjectionContext, hydrate, initCustomFormatter, initDirectivesForSSR, inject, isMemoSame, isProxy, isReactive, isReadonly, isRef, isRuntimeOnly, isShallow, isVNode, markRaw, mergeDefaults, mergeModels, mergeProps, nextTick, normalizeClass, normalizeProps, normalizeStyle, onActivated, onBeforeMount, onBeforeUnmount, onBeforeUpdate, onDeactivated, onErrorCaptured, onMounted, onRenderTracked, onRenderTriggered, onScopeDispose, onServerPrefetch, onUnmounted, onUpdated, openBlock, popScopeId, provide, proxyRefs, pushScopeId, queuePostFlushCb, reactive, readonly, ref, registerRuntimeCompiler, render, renderList, renderSlot, resolveComponent, resolveDirective, resolveDynamicComponent, resolveFilter, resolveTransitionHooks, setBlockTracking, setDevtoolsHook, setTransitionHooks, shallowReactive, shallowReadonly, shallowRef, ssrContextKey, ssrUtils, stop, toDisplayString, toHandlerKey, toHandlers, toRaw, toRef, toRefs, toValue, transformVNodeArgs, triggerRef, unref, useAttrs, useCssModule, useCssVars, useModel, useSSRContext, useSlots, useTransitionState, vModelCheckbox, vModelDynamic, vModelRadio, vModelSelect, vModelText, vShow, version, warn, watch, watchEffect, watchPostEffect, watchSyncEffect, withAsyncContext, withCtx, withDefaults, withDirectives, withKeys, withMemo, withModifiers, withScopeId)

 warning  in ./node_modules/bootstrap-vue/esm/vue.js

export 'default' (reexported as 'Vue') was not found in 'vue' (possible exports: BaseTransition, BaseTransitionPropsValidators, Comment, EffectScope, Fragment, KeepAlive, ReactiveEffect, Static, Suspense, Teleport, Text, Transition, TransitionGroup, VueElement, assertNumber, callWithAsyncErrorHandling, callWithErrorHandling, camelize, capitalize, cloneVNode, compatUtils, compile, computed, createApp, createBlock, createCommentVNode, createElementBlock, createElementVNode, createHydrationRenderer, createPropsRestProxy, createRenderer, createSSRApp, createSlots, createStaticVNode, createTextVNode, createVNode, customRef, defineAsyncComponent, defineComponent, defineCustomElement, defineEmits, defineExpose, defineModel, defineOptions, defineProps, defineSSRCustomElement, defineSlots, devtools, effect, effectScope, getCurrentInstance, getCurrentScope, getTransitionRawChildren, guardReactiveProps, h, handleError, hasInjectionContext, hydrate, initCustomFormatter, initDirectivesForSSR, inject, isMemoSame, isProxy, isReactive, isReadonly, isRef, isRuntimeOnly, isShallow, isVNode, markRaw, mergeDefaults, mergeModels, mergeProps, nextTick, normalizeClass, normalizeProps, normalizeStyle, onActivated, onBeforeMount, onBeforeUnmount, onBeforeUpdate, onDeactivated, onErrorCaptured, onMounted, onRenderTracked, onRenderTriggered, onScopeDispose, onServerPrefetch, onUnmounted, onUpdated, openBlock, popScopeId, provide, proxyRefs, pushScopeId, queuePostFlushCb, reactive, readonly, ref, registerRuntimeCompiler, render, renderList, renderSlot, resolveComponent, resolveDirective, resolveDynamicComponent, resolveFilter, resolveTransitionHooks, setBlockTracking, setDevtoolsHook, setTransitionHooks, shallowReactive, shallowReadonly, shallowRef, ssrContextKey, ssrUtils, stop, toDisplayString, toHandlerKey, toHandlers, toRaw, toRef, toRefs, toValue, transformVNodeArgs, triggerRef, unref, useAttrs, useCssModule, useCssVars, useModel, useSSRContext, useSlots, useTransitionState, vModelCheckbox, vModelDynamic, vModelRadio, vModelSelect, vModelText, vShow, version, warn, watch, watchEffect, watchPostEffect, watchSyncEffect, withAsyncContext, withCtx, withDefaults, withDirectives, withKeys, withMemo, withModifiers, withScopeId)

When i run localhost:8080 I get a list of errors there also:

Uncaught runtime errors:
ERROR
vue__WEBPACK_IMPORTED_MODULE_1__.default is undefined
@webpack-internal:///./node_modules/bootstrap-vue/esm/vue.js:90:14
./node_modules/bootstrap-vue/esm/vue.js@http://localhost:8080/js/chunk-vendors.js:3472:1
__webpack_require__@http://localhost:8080/js/app.js:600:33
fn@http://localhost:8080/js/app.js:834:21
@webpack-internal:///./node_modules/bootstrap-vue/esm/constants/events.js:66:81
./node_modules/bootstrap-vue/esm/constants/events.js@http://localhost:8080/js/chunk-vendors.js:2427:1
__webpack_require__@http://localhost:8080/js/app.js:600:33
fn@http://localhost:8080/js/app.js:834:21
@webpack-internal:///./node_modules/bootstrap-vue/esm/components/alert/alert.js:9:95
./node_modules/bootstrap-vue/esm/components/alert/alert.js@http://localhost:8080/js/chunk-vendors.js:139:1
__webpack_require__@http://localhost:8080/js/app.js:600:33
fn@http://localhost:8080/js/app.js:834:21
@webpack-internal:///./node_modules/bootstrap-vue/esm/components/alert/index.js:6:83
./node_modules/bootstrap-vue/esm/components/alert/index.js@http://localhost:8080/js/chunk-vendors.js:150:1
__webpack_require__@http://localhost:8080/js/app.js:600:33
fn@http://localhost:8080/js/app.js:834:21
@webpack-internal:///./node_modules/bootstrap-vue/esm/components/index.js:6:83
./node_modules/bootstrap-vue/esm/components/index.js@http://localhost:8080/js/chunk-vendors.js:1129:1
__webpack_require__@http://localhost:8080/js/app.js:600:33
fn@http://localhost:8080/js/app.js:834:21
@webpack-internal:///./node_modules/bootstrap-vue/esm/index.js:1565:88
./node_modules/bootstrap-vue/esm/index.js@http://localhost:8080/js/chunk-vendors.js:2746:1
__webpack_require__@http://localhost:8080/js/app.js:600:33
fn@http://localhost:8080/js/app.js:834:21
@webpack-internal:///./src/main.js:10:90
./src/main.js@http://localhost:8080/js/app.js:107:1
__webpack_require__@http://localhost:8080/js/app.js:600:33
__webpack_exports__<@http://localhost:8080/js/app.js:1722:109
__webpack_require__.O@http://localhost:8080/js/app.js:646:23
@http://localhost:8080/js/app.js:1723:53
@http://localhost:8080/js/app.js:1725:12

Please help resolve the issue.

Moritz Ringler · Accepted Answer · 2023-08-09 10:55:21Z

0

bootstrap-vue still does not support Vue 3 except with migration build.

You can try bootstrap-vue-next, which will be the v3 version, but is still in alpha stage:

npm i bootstrap-vue-next

answered Aug 9, 2023 at 10:55

Moritz Ringler

16.4k10 gold badges29 silver badges45 bronze badges

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

Comments

Alex · Accepted Answer · 2024-03-11 12:05:08Z

0

Did you try with the changes on their website? It's still not compatible with vue 3 and also need version 4 of bootstrap to work. This is the link: https://bootstrap-vue.org/vue3

answered Mar 11, 2024 at 12:05

Alex

1

Collectives™ on Stack Overflow

using bootstrap-vue in vuejs3 project doesnt compile successfully

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