Uncaught TypeError: Vue.component is not a function

Question

In OS X with Laravel/Homestead, I'm getting an error using Vue (v2.2.1). The component won't load and the console error is "Uncaught TypeError: Vue.component is not a function".

Full console error

    Uncaught TypeError: Vue.component is not a function
        at eval (eval at <anonymous> (app.js:321), <anonymous>:17:5)
        at Object.<anonymous> (app.js:321)
        at __webpack_require__ (app.js:20)
        at app.js:64
        at app.js:67

What is throwing me off is that if I make a change to app.js, the webpack does not update to reflect any changes. So I need to A) fix the issue above, and B) figure out how to get the webpack to show updates in the console.

Any help would be greatly appreciated! I'm a noob. Here is my code...

app.js file

    Vue.component('video-upload', require('./components/VideoUpload.vue'));

    const app = new Vue({
        el: 'body'
    });

VideoUpload.vue

    <template>
        <div class="container">
            <div class="row">
                <div class="col-md-8 col-md-offset-2">
                    <div class="panel panel-default">
                        <div class="panel-heading">Example</div>

                        <div class="panel-body">
                            This is an example
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </template>

    <script>
        export default {
            mounted() {
                console.log('Component mounted.')
            }
        }
    </script>

upload.blade.php

    @extends('layouts.app')

    @section('content')
        <video-upload></video-upload>
    @endsection

package.json

    {
      "private": true,
      "scripts": {
        "prod": "gulp --production",
        "dev": "gulp watch"
      },
        "devDependencies": {
        "bootstrap-sass": "^3.3.7",
        "gulp": "^3.9.1",
        "jquery": "^3.1.0",
        "laravel-elixir": "^6.0.0-9",
        "laravel-elixir-vue": "^0.1.4",
        "laravel-elixir-webpack-official": "^1.0.2",
        "lodash": "^4.14.0",
        "video.js": "^5.11.6",
        "vue": "^2.2.1",
        "vue-resource": "^0.9.3"
      }
    }

nothing's wrong with your code. so, i think laravel elixir webpack official that gives you problem here https://github.com/vuejs/laravel-elixir-vue-2/issues/20 . laravel mix is a better option. — ishadif, Mar 01 '17 at 01:46

score 59 · Answer 1 · edited Feb 20 '21 at 19:59

59

After an update from laravel-mix 5.0.9 to laravel-mix 6.0.11 on a laravel 7 project it started to see this error on vue compiled views. I change the call the Vue package:

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

edited Feb 20 '21 at 19:59

Dharman

30,962
25
85
135

answered Feb 20 '21 at 19:53

Fernando Gonzalez

801
7
8

Sure fixed my issue, it was `Vue.use is not a function`. – reppair Mar 21 '21 at 20:20
Solved my issue as well. Thanks! – SvEnjoyPro Apr 11 '21 at 01:59
Also solved by Vue.use.component is not a function You will also need to change all your `Vue.default.XXXX` by `Vue.XXXX` – Inigo EC Nov 03 '21 at 18:41
I'm using more or less the same configuration and this worked for me too in Laravel 8 and Vue 2.6. Thanks for the valuable information. – Mycodingproject Jan 24 '22 at 14:18
This fixed the problem for me, but does anyone understand why this problem occurs when updating to `laravel-mix 6.0.x`? – Cato Minor Apr 18 '23 at 00:40

score 18 · Answer 2 · answered Jan 19 '21 at 19:20

18

import vue properly in your code using import keyword like this:

//import vue
import Vue from 'vue';

//register component
Vue.component('yourComponentName',require('./components/yourComponentName.vue').default);

//initialize vue
const app = new Vue({
    el: '#app',
});

answered Jan 19 '21 at 19:20

Qasim Nadeem

597
4
17

1

I wasn't using Elixer, so this worked for me, thnx! – Tomjesch Jan 27 '21 at 10:59

score 12 · Answer 3 · answered Jun 25 '21 at 13:12

For any one who has the same issue and is not related to Laravel.

Hint: using Vue 3+

Register the component globally:

const MyComponent = {
  // ... options ...
}

// if you do not have App component
Vue.createApp({}).component("my-component", MyComponent).mount("#app");

// if you have an App component
const App = {
  // ... options ...
}
const app = Vue.createApp(App);
app.component("my-component", MyComponent);
app.mount("#app");

Please refer to Documentation for more info

score 4 · Accepted Answer · answered Mar 03 '17 at 11:07

4

1

Change your package.json

"laravel-elixir-vue-2": "^0.3.0"

And run

<!-- language: lang-js -->
npm install

OR

2

npm install laravel-elixir-vue-2 --save-dev

And then

Change your gulpfile.js like this

<!-- language: lang-js -->
var elixir = require('laravel-elixir')

require('laravel-elixir-vue-2');

answered Mar 03 '17 at 11:07

LaraFlow

352
5
15

Thank you for the response. Once updated to Vue 2, the next console error was "[Vue warn]: Do not mount Vue to or - mount to normal elements instead." I simply wrapped the component in a
, re-ran Gulp, and everything works beautifully. Much appreciated!
– Stephen Pappas Mar 04 '17 at 17:51

score 4 · Answer 5 · answered Feb 08 '22 at 17:03

4

CHECK YOUR CDN VUE VERSION. THEY CHANGED FROM VUE 2 TO VUE 3.

This scenarion happened here, we were using Vue 2 and our CDN changed the global script to Vue 3.

Vue 3 changed the "Vue.component" to "Vue.directive" which broke our application.

answered Feb 08 '22 at 17:03

Allan Zeidler

317
2
7

Jyotirmaya Das · Answer 6 · 2022-02-18T04:32:02.387

4

VUE.JS CDN changed the global script to Vue 3 which is not supported [Vue.component] any more.

Use Vue Version 2.6.14, this works for me (older apps) https://v2.vuejs.org/v2/

edited Feb 18 '22 at 04:32

answered Feb 18 '22 at 04:25

Jyotirmaya Das

41
3

score 2 · Answer 7 · edited Aug 05 '21 at 03:45

2

window.Vue = require('vue').default;
const app = new Vue({
    el: '#app',
});


<body>
 <div id="app">.....</div>`
</body>

edited Aug 05 '21 at 03:45

saurabh

2,553
2
21
28

answered Aug 04 '21 at 17:22

Jitesh Sinha

29
4

score 0 · Answer 8 · edited Feb 24 '22 at 16:44

0

just add this

/*import Vue from 'vue/dist/vue'*/ before
/*require('./bootstrap');*/
  
require('./bootstrap');

import Vue from 'vue/dist/vue'
window.Vue = require('vue');

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


const app = new Vue({
  el:"#app",
});

edited Feb 24 '22 at 16:44

jmoerdyk

5,544
7
38
49

answered Feb 24 '22 at 16:17

محمد عبدالله محمد ابكر

1
1

Uncaught TypeError: Vue.component is not a function

8 Answers8

1

2

And then