I am utilizing webpack alongside vuejs in an effort to optimize my application. I am attempting to consolidate most of the code into vendor.js to reduce the size of app.js and improve webpack build efficiency.
My current goal is to globally register the Font Awesome vuejs version.
In my main.js file:
import Icon from 'vue-awesome';
window.Icon = Icon;
Vue.use(Icon);
However, in my component .vue file, I have:
<template>
<icon name="beer"></icon>
</template>
<script>
export default {
components: {
Icon: window.Icon
}
}
</script>
Upon implementation, I receive the following error message:
Unknown custom element: <icon> - did you register the component correctly?Although window.Icon is properly set (as confirmed by logging), it seems I may be making a beginner mistake here, as everything works fine when I include it directly within the component locally.