Hola a todos espero se encuentren bien, les cuento mi problema, estoy haciendo un proyecto en Laravel 8 con Laravel UI y estoy aprendiendo a usar vue para el lado del usuario el problema es que no puedo mostrar un simple "hola mundo", en la consola del navegador me aparece el siguiente error:
app.js:1919 Uncaught TypeError: Vue.component is not a function
at Object../resources/js/app.js (app.js:1919)
at __webpack_require__ (app.js:49597)
at checkDeferredModulesImpl (app.js:49735)
at Function.__webpack_require__.x (app.js:49748)
at app.js:49755
at app.js:49757
Lei varios post con este problema pero ninguno me ayudo a solucionarlo, mi app.js luce asi:
/**
* First we will load all of this project's JavaScript dependencies which
* includes Vue and other libraries. It is a great starting point when
* building robust, powerful web applications using Vue and Laravel.
*/
require('./bootstrap');
//window.Vue = require('vue');
import Vue from 'vue';
/**
* The following block of code may be used to automatically register your
* Vue components. It will recursively scan this directory for the Vue
* components and automatically register them with their "basename".
*
* Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
*/
// const files = require.context('./', true, /\.vue$/i)
// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
/**
* Next, we will create a fresh Vue application instance and attach it to
* the page. Then, you may begin adding components to this application
* or customize the JavaScript scaffolding to fit your unique needs.
*/
const app = new Vue({
el: '#app',
data: {
message: 'Hola Vue!'
}
});
y mi package.json:
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "mix",
"watch": "mix watch",
"watch-poll": "mix watch -- --watch-options-poll=1000",
"hot": "mix watch --hot",
"prod": "npm run production",
"production": "mix --production"
},
"devDependencies": {
"axios": "^0.21",
"bootstrap": "^4.0.0",
"jquery": "^3.2",
"laravel-mix": "^6.0.6",
"lodash": "^4.17.19",
"popper.js": "^1.12",
"postcss": "^8.1.14",
"resolve-url-loader": "^2.3.1",
"sass": "^1.20.1",
"sass-loader": "^8.0.0",
"vue": "^2.5.17",
"vue-loader": "^15.9.5",
"vue-template-compiler": "^2.6.10"
},
"dependencies": {
"@ckeditor/ckeditor5-build-classic": "^26.0.0",
"vue": "^2.6.12"
}
}
En la consola escribí un Vue.component y el resultado fue "undefined".
¿A qué se debe este error? ¿Cómo podría solucionarlo? De antemano muchas gracias.
window.Vue = require('vue');
?