I'm currently in the process of building a project that combines Laravel 8 and Vue JS 3. I've set everything up, but whenever I try running `npm run watch`, I encounter an error message similar to the one below. Despite looking through various forums for solutions, I still can't seem to resolve the issue. Can anyone offer some assistance?
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
});
}