'TypeError: Vue.component is not a function laravel project

This seems it is a persistent problem. I searched all over for solutions with no success yet. I'll just post the exact error message from my console:

app.js:34588 Uncaught TypeError: Vue.component is not a function
at Object.supportsPassive (app.js:34588)
at __webpack_require__ (app.js:20)
at Object.<anonymous> (app.js:12599)
at __webpack_require__ (app.js:20)
at Object.defineProperty.value (app.js:12588)
at __webpack_require__ (app.js:20)
at app.js:63
at app.js:66

and now my package.json:

 "devDependencies": {
    "axios": "^0.18.0",
    "cross-env": "^5.2.0",
    "laravel-mix": "^2.0",
    "lodash": "^4.17.5",
    "popper.js": "^1.12",
    "vue": "^2.5.7"
},
"dependencies": {
    "vee-validate": "^2.1.0-beta.9",
    "vue-router": "^3.0.1",
    "vuetify": "^1.2.3",
    "vuex": "^3.0.1"
}

app.js 

import Vue from 'vue'
import './plugins/bootstrap'
import './plugins/vuetify'
import router from './plugins/routes'

/**
 * 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.
 */
// Vue.component('entry', require('./pages/Home.vue'));

const app = new Vue({
    el: '#app',
    router
});
laravelvue.jsaxios


Solution 1:[1]

I was making some dependecies updates on a laravel 7 project and it started to see this error on vue compiled views. I change the Vue package call:

Use import Vue from 'vue' instead of window.Vue = require("vue"); worked for me.

Solution 2:[2]

I am new to Vue.js so I will share how I got my app running. I am using Laravel 9 and Vue 3. My code was as follows:

// import Vue from 'vue';
import {
    createApp
} from 'vue';

const app = createApp({});

Vue.component('mainapp', require('./components/mainapp.vue').default)

app.mount('#app');

This gave the following error:

Cannot read properties of undefined (reading 'component')

So, I did a console.log(Vue) and I got undefined. I then changed to

app.component('mainapp', require('./components/mainapp.vue').default)

and it worked!

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Dharman
Solution 2 Josiah Mahachi

Related Questions