title: How to use VueJS 2 global components inside single file components?
body: <p>I am trying to use a globally registered component (with <em>Vue.component</em>) inside a single file component but I am always getting </p>
  
  <pre><code>vue.common.js:2611[Vue warn]: Unknown custom element: &lt;my-component&gt; - did you register the component correctly?
  </code></pre>
  
  <p>For example:</p>
  
  <p>main.js:</p>
  
  <pre><code>...
  Vue.component('my-component', {
      name: 'my-component',
      template: '&lt;div&gt;A custom component!&lt;/div&gt;'
  })
  ...
  </code></pre>
  
  <p>home.vue:</p>
  
  <pre><code>&lt;template&gt;
      &lt;div&gt;
          &lt;my-component&gt;&lt;/my-component&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  &lt;script&gt;
      module.exports = {
          name: 'home'
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>If I register it locally, it works OK:</p>
  
  <pre><code>&lt;template&gt;
      &lt;div&gt;
          &lt;my-component&gt;&lt;/my-component&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  &lt;script&gt;
  module.exports = {
      name: 'home',
      components: {
          'my-component': require('./my-component.vue')
      }
  }
  &lt;/script&gt;
  </code></pre>