export 'default' (imported as 'Vue') was not found in 'vue' in Vue 3 and Laravel

Question

I am going to create a Laravel 8 + Vue JS 3 hybrid project.I have already setup everything, but when I npm run watch, there is an error like the one below. I have tried various ways to look at some forums but still error. Can anyone help me?

WARNING in ./resources/js/components/index.js 6:2-15 export 'default' (imported as 'Vue') was not found in 'vue' (possible exports: BaseTransition, Comment, Fragment, KeepAlive, Static, Suspense, Teleport, Text, Transition, TransitionGroup, callWithAsyncErrorHandling, callWithErrorHandling, camelize,....

./js/components/ExampleComponent.vue

<template>
    <div>
        <h1>Test</h1>
    </div>
</template>

<script>
    export default {
        mounted() {
            console.log('Component mounted.')
        }
    }
</script>

./js/components/index.js

import Vue from 'vue';
import Card from './Card';
import Button from './Button';

// Components global.
[
  Card,
  Button,
].forEach(Component => {
  Vue.component(Component.name, Component)
})

./js/app.js

require('./bootstrap');

window.Vue = require('vue');
import './components';

Vue.component('example-component', require('./components/ExampleComponent.vue').default);

const app = new Vue({
    el: '#app'
});

webpack.mix.js

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

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

   if(!mix.inProduction()) {
      mix.sourceMaps();
      mix.webpackConfig({ devtool: 'source-map'})
      .options({
         processCssUrls: false
      });
   }

Does this answer your question? "export 'default' (imported as 'Vue') was not found in 'vue' — Ohgodwhy
– Ohgodwhy, Commented Apr 13, 2021 at 6:19
Check this tutorial for Vue v3 setup without vue-cli: frontendguruji.com/blog/… — Mandeep Pasbola
– Mandeep Pasbola, Commented Jan 2, 2022 at 8:27

Boussadjra Brahim · Accepted Answer · 2021-04-13 06:53:09Z

4

Your code should be like :

./js/app.js

require('./bootstrap');
import { createApp } from 'vue';

import components from  './components';
import ExampleComponent from './components/ExampleComponent.vue'

let app=createApp(ExampleComponent)
app.use(components)


app.mount("#app")

./js/components/index.js

this is a plugin that register the components globally


import Card from './Card';
import Button from './Button';

// Components global.

export default {
  install: (app, options) => {
    [
  Card,
  Button,
].forEach(Component => {
  app.component(Component.name, Component)
})
  }
}

answered Apr 13, 2021 at 6:53

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

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

Collectives™ on Stack Overflow

export 'default' (imported as 'Vue') was not found in 'vue' in Vue 3 and Laravel

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related