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
});
}
Share
Improve this question
edited Apr 13, 2021 at 7:15
Boussadjra Brahim
1
asked Apr 13, 2021 at 6:18
frankfurtfrankfurt
1531 gold badge7 silver badges25 bronze badges
2
- 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
Reset to default 4Your 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)
})
}
}