"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

import * as Vue from 'vue'

this works for me

Answer 2

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 3

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

Answer 4

in my case, I use webpack and vue2.

I use vue-loader to handle .vue file . I found I installed vue-loader v17 which requires vue3, so I uninstall it and npm i vue-loader@15

Answer 5

In my case it was the wrong resolve.alias directive in webpack.config.js, which set 'vue' to 'vue/dist/vue.js' instead of 'vue/dist/vue.esm.js';

Answer 6

On Vue 3 applications you have to use the following connection Vuex store

store.js

import { createStore } from "vuex";
import axios from "axios";

export default createStore({
    state: {
    },
    mutations: {
    },
    actions: {
    }
})

main.js

import store from '@/store';
...
app.use(store);

Answer 7

In my case, this looks like it was caused by some sort of corrupt node module somewhere. I solved the problem by running

rm -rf node_modules/

In my project root directory. This deletes your node_modules folder. Then I reran

yarn install

or

npm install

and the problem was fixed. Hope this helps someone else. Also, many have noted the differences between vue 3 and vue 2 dependencies, I'm not sure those are still relevant in 2022.

Answer 8

Looks like it is related to this bug. I would mark mode as unsafe for now.

mode = T.unsafe(:none)

You can play with the code on sorbet.run