Registering components globally in vuejs

Question

I'm using webpack with vuejs and I'm trying to put as much stuff as I can in vendor.js so that my app.js can be smaller so that webpack build time can be reduced.

I'm trying to register Font Awesome vuejs version globally.

in my main.js

import Icon from 'vue-awesome';
window.Icon = Icon;
Vue.use(Icon);

And in my component .vue file I have

<template>
    <icon name="beer"></icon>
</template>

<script>
    export default {

    components: {
        Icon: window.Icon
    }

}
</script>

And I am getting this error: Unknown custom element: <icon> - did you register the component correctly?

window.Icon is set correctly I can log it, but i think i am doing some rookie mistake here, because when i include it locally in the component directly everything is working.

Try lower-case "i" for your component name: icon: window.Icon — Roy J
– Roy J, Commented Apr 7, 2017 at 20:06
Just looking at vue-awesome docs, shouldn't you import Icon in way like this import Icon from 'vue-awesome/components/Icon.vue' ? — Belmin Bedak
– Belmin Bedak, Commented Apr 7, 2017 at 20:29
You need to do Vue.use() within each module. github.com/vuejs-templates/webpack/issues/63 — Roy J
– Roy J, Commented Apr 7, 2017 at 20:31

tony19 · Accepted Answer · 2022-07-16 00:09:50Z

2

in a module environment such as CommonJS, you always need to call Vue.use() explicitly

A longer discussion is here: https://github.com/vuejs-templates/webpack/issues/63, but the gist is that each module must call Vue.use().

edited Jul 16, 2022 at 0:09

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Apr 7, 2017 at 21:22

Roy J

44k10 gold badges84 silver badges106 bronze badges

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

2 Comments

Jared Farrish Over a year ago

So it's synonymous with import, include and require constructs from other languages?

Egor Stambakio Over a year ago

@JaredFarrish no, there are still native js import and require. Vue.use installs a plugin in order to extend Vue functionality.

Collectives™ on Stack Overflow

Registering components globally in vuejs

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related