0

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.

9
  • ¿Por qué tenés comentado window.Vue = require('vue');?
    – padaleiana
    Commented el 18 mar. 2021 a las 22:21
  • @padaleiana en un post lei a alguien que le funciono eso y lo reemplace por "import Vue from 'vue';", pero nada :(
    – Mrnew
    Commented el 18 mar. 2021 a las 22:25
  • Puedes mostrarnos tu package.json?
    – oswaldog
    Commented el 18 mar. 2021 a las 22:35
  • @oswaldog claro, lo añadí al post
    – Mrnew
    Commented el 18 mar. 2021 a las 22:41
  • 1
    @padaleiana hice lo que me dijiste y actualice composer y comenzó a funcionar :). Muchas gracias
    – Mrnew
    Commented el 19 mar. 2021 a las 0:22

1 respuesta 1

1

añadí el import de Vue, luego, abajo del import definí el window.Vue = require('vue'): El código quedó así

/**
 * 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');


import Vue from 'vue';

window.Vue = require('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 actualize la version de mi composer, y comenzó a funcionar :). Gracias a todos por su ayuda.

1
  • ¡Recuerda aceptar tu respuesta!
    – padaleiana
    Commented el 23 mar. 2021 a las 21:03

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.