Vue.component is not a function / Migrating from Vue 2 to Vue 3 Version

Question

I am trying to update the Vue version in a project from 2 to 3. The thing is, that I have to use .js files, no .vue. The problem is, that I cannot find a substitution for "Vue.component".

My app.js

    // Vue Router 4
    var router = VueRouter.createRouter({
        history: VueRouter.createWebHashHistory(),
        routes,
      });

    // Create Vuex store
    var store = Vuex.createStore({
        state: {
            // state 
        }
    });

    // Vue 3
    var app = Vue.createApp({});

    app.use(router);
    app.use(store);
    app.mount('#app');

One of the components:

component-ex.js

Vue.component('component-ex', {});

// I also tried app.component('component-ex', {});

Then I import the app and all components via index.html

Index.html

    <script src="https://unpkg.com/vue@3"></script>
    <script src="https://unpkg.com/vue-router@4"></script>
    <script src="https://unpkg.com/[email protected]/dist/vuex.global.js"></script>

    <script src="app.js"></script>
    <script src="/components/component-ex.js"></script>

In the version 2 everything worked but now it throws an error: Vue.component is not a function

Because there's no Vue. You already use app for app.use. Why not for anything else? — Estus Flask
– Estus Flask, Commented Apr 11, 2022 at 11:25
When I use app.component, the error is thrown Uncaught ReferenceError: app is not defined — Anna
– Anna, Commented Apr 11, 2022 at 11:36
It's defined where you defined it, var app =. If you need to use it in another place, you need to export and import it. You will naturally have problems when using non-modular JS in Vue 3. Consider using native ES modules <script module>, or you'll have to share app through globals — Estus Flask
– Estus Flask, Commented Apr 11, 2022 at 15:08

Daniel Storey · Accepted Answer · 2022-04-11 20:11:47Z

5

From the Vue docs:

The .mount() method should always be called after all app configurations and asset registrations are done. Also note that its return value, unlike the asset registration methods, is the root component instance instead of the application instance.

So your index.html should probably look more like this:

    <script src="https://unpkg.com/vue@3"></script>
    <script src="https://unpkg.com/vue-router@4"></script>
    <script src="https://unpkg.com/[email protected]/dist/vuex.global.js"></script>

    <script src="app.js"></script>
    <script src="/components/component-ex.js"></script>
    <script src="/components/another-component.js"></script>
    <script src="/components/yet-another-component.js"></script>
    
    <script>app.mount('#app');</script>

answered Apr 11, 2022 at 20:11

Daniel Storey

9716 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue.component is not a function / Migrating from Vue 2 to Vue 3 Version

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related