How to use VueJS 2 global components inside single file components?
javascript, vue-component, vue.js
Solution
You don't need the module.exports. You can register the component globally by having this within the mycomponent.vue file.
<template>
<div>A custom component!</div>
</template>
<script>
export default {}
</script>
Then add to main.js
import MyComponent from './component.vue'
Vue.component('my-component', MyComponent);
or I typically register them in a 'globals' file them import that into the main.
That should then allow you to use my-component anywhere in the app.
Problem
I am trying to use a globally registered component (with Vue.component) inside a single file component but I am always getting ``` vue.common.js:2611[Vue warn]: Unknown custom element: <my-component> - did you register the component correctly? ``` For example: main.js: ``` ... Vue.component('my-component', { name: 'my-component', template: '<div>A custom component!</div>' }) ... ``` home.vue: ``` <template> <div> <my-component></my-component> </div> </template> <script> module.exports = { name: 'home' } </script> ``` If I register it locally, it works OK: ``` <template> <div> <my-component></my-component> </div> </template> <script> module.exports = { name: 'home', components: { 'my-component': require('./my-component.vue') } } </script> ```