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

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

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

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)
})
  }
}

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0