"export 'default' (imported as 'Vue') was not found in 'vue'

Question

I am a beginner with VueJs and this is my first App:

import { BootstrapVue } from 'bootstrap-vue'
import { createApp } from 'vue'
import App from './App.vue'
    
const myApp = createApp(App)
myApp.use(BootstrapVue)
myApp.mount('#app')

And when I save, nothing appears in my browser and it show this message in the Command:

warning  in ./src/main.js

"export 'default' (imported as 'Vue') was not found in 'vue'

Answer 1

Bootstrap-Vue does not yet support Vue 3. So if you want to use Bootstrap-Vue you will have to stick with Vue 2 for now.

In general, most of the libraries don't support Vue 3 yet, so I would suggest waiting a bit longer before using it until the ecosystem has caught up.

Explanation

The reason this is happening is because in Vue 2, Vue provides a default export export default vue, which allows BootstrapVue to use import Vue from 'vue'.

However, in Vue 3 this has changed, and Vue does no longer provide a default export, and instead uses named exports. So when BootstrapVue uses the following line import Vue from 'vue', the error occurs.

Answer 2

import * as Vue from 'vue'

this works for me

Answer 3

I was getting the warning

"export 'default' (imported as 'Vue') was not found in 'vue'

I'm using Vue 3 but the code I'm studying is Vue 2.

My code Vue 2 in main.js

import Vue from 'vue'
import App from './App.vue'
    
Vue.config.productionTip = false
    
new Vue ({
    render: h => h(App),
}).$mount('#app')

So I needed to create a Vue instance with the following code Vue 2:

export const eventBus = new Vue ()

Then I received the error code, which I resolved by correcting the code that looked like this:

import { createApp } from 'vue'
import App from './App.vue'

export const eventBus = createApp(App)

createApp(App).mount('#app')

Answer 4

hi i am using laravel 9 mix and vue 3 here is my code app.js

// app.js
require('./bootstrap');

import { createApp } from 'vue'
import test from './components/Test.vue';

createApp({
    components: { test }
}).mount('#app')

webpack.mix.js

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js').vue();