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/ponents/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/ponents/ExampleComponent.vue

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

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

./js/ponents/index.js

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

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

./js/app.js

require('./bootstrap');

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

Vueponent('example-ponent', require('./ponents/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
      });
   }

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/ponents/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/ponents/ExampleComponent.vue

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

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

./js/ponents/index.js

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

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

./js/app.js

require('./bootstrap');

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

Vue.ponent('example-ponent', require('./ponents/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
      });
   }

• javascript
• laravel
• vue.js
• laravel-8
• vuejs3

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

1 Answer 1

Your code should be like :

./js/app.js

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

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

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


app.mount("#app")

./js/ponents/index.js

this is a plugin that register the ponents globally

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

// Components global.

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