title: Vue 3 - "Failed to resolve component" with global components
body: <p>My Vue components work fine when declared in the top level HTML file, like this</p>
  <pre class="lang-html prettyprint-override"><code>&lt;body&gt;
    &lt;div class='app' id='app'&gt;        
      &lt;header-bar id='headerBar'&gt;&lt;/header-bar&gt;        
      &lt;journal-page&gt;&lt;/journal-page&gt;
    &lt;/div&gt;
    &lt;script src=&quot;js/app.js&quot;&gt;&lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  <p>but using a <code>&lt;journal-card&gt;</code> component inside the <code>&lt;journal-page&gt;</code> component gives me the error:</p>
  <blockquote>
  <p>[Vue warn]: Failed to resolve component: journal-card at <code>&lt;JournalPage&gt;</code>.</p>
  </blockquote>
  <p>How do I fix this please?</p>
  <p>Here's my top level code that loads the Vue components, <code>app.js</code>:</p>
  <pre class="lang-js prettyprint-override"><code>import * as _vue from 'vue';
  import _headerBar from './widgets/headerBar.vue';
  import _journalCard from './widgets/journalCard.vue';
  import _journalPage from './widgets/journalPage.vue';
  import _store from './data/store.js';
  
  const app = _vue.createApp
  ({
      components: 
      {
          'headerBar': _headerBar,
          'journalCard': _journalCard,
          'journalPage': _journalPage     
      },
      data : _store,
      methods: {}
  });
  const mountedApp = app.mount('#app');
  </code></pre>
  <p>and here's my <code>journal-page.vue</code> container</p>
  <pre class="lang-html prettyprint-override"><code>&lt;template&gt;  
    &lt;ul&gt;
      &lt;journal-card v-for=&quot;item in journal&quot; :key=&quot;item.id&quot; :entry=item&gt;&lt;/journal-card&gt;
    &lt;/ul&gt;
  &lt;/template&gt;
  
  &lt;script lang=&quot;js&quot;&gt;
  import _store from '../data/store.js';
  export default {
    'data': _store
  };
  &lt;/script&gt;
  </code></pre>
  <p>and <code>journal-card.vue</code> component</p>
  <pre class="lang-html prettyprint-override"><code>&lt;template&gt;
    &lt;div&gt;
      hi imma journal entry
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script lang=&quot;js&quot;&gt;
  export default {
    'data': null,
    'props': [ 'entry' ]
  };
  &lt;/script&gt;
  </code></pre>