How to use VueJS 2 global components inside single file components?

Question

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> 

Answer 1

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.