Vue 3 - "Failed to resolve component" with global components

Question

My Vue components work fine when declared in the top level HTML file, like this

<body>
  <div class='app' id='app'>        
    <header-bar id='headerBar'></header-bar>        
    <journal-page></journal-page>
  </div>
  <script src="js/app.js"></script>
</body>

but using a <journal-card> component inside the <journal-page> component gives me the error:

[Vue warn]: Failed to resolve component: journal-card at <JournalPage>.

How do I fix this please?

Here's my top level code that loads the Vue components, app.js:

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');

and here's my journal-page.vue container

<template>  
  <ul>
    <journal-card v-for="item in journal" :key="item.id" :entry=item></journal-card>
  </ul>
</template>

<script lang="js">
import _store from '../data/store.js';
export default {
  'data': _store
};
</script>

and journal-card.vue component

<template>
  <div>
    hi imma journal entry
  </div>
</template>

<script lang="js">
export default {
  'data': null,
  'props': [ 'entry' ]
};
</script>

Dan · Accepted Answer · 2022-05-10T19:15:25.690

41

Registering components in the root component's components option doesn't make them global. Doing that just makes them available to the root component itself, not its children.

To register components globally, use app.component in your top-level code:

main.js

import { createApp } from 'vue';
import App from './App.vue';
import MyGlobalComponent from './components/MyGlobalComponent.vue';

const app = createApp(App);
app.component('MyGlobalComponent', MyGlobalComponent); ✅
const mountedApp = app.mount('#app');

edited May 10 '22 at 19:15

answered Feb 03 '21 at 09:56

Dan

59,490
13
101
110

1

The key part is sequence I was adding component after mounting app. above example is perfect fix for it. – Khagesh Jan 23 '23 at 13:04

score 0 · Answer 2 · answered Jun 13 '22 at 19:38

In my scenario issue was different. I was trying to render a similar multi word Vue component in a laravel blade file.

If you're referring a Vue component in a non .Vue file (like HTML / Laravel Blade etc), you should use kebab-cased format to refer the component name. Like my-global-component

Vue documentation - https://vuejs.org/guide/essentials/component-basics.html#dom-template-parsing-caveats

score 0 · Answer 3 · answered Jan 27 '23 at 10:27

Also as a side note since this page shows up when looking in search engines for some problems with "Vue 3 Failed to resolve component", there are a few things that were deprecated with Vue 3 / Quasar 2:

eg. q-side-link that silently disappeared (previous doc here)

as per this comment:

QSideLink -- no longer required! Simply use a QItem or whatever component you want and bind an @click="$router.push(...)" to it.

Sorry if it's not exactly on topic but it will bite some other people, so I prefer to help one person with this comment ;-)

score -1 · Answer 4 · answered Jan 30 '23 at 14:49

-1

make sure the mounting code comes at last so

app.mount('#app')    
app.component('list-view', ListView2)

is wrong and it will not work but

app.component('list-view', ListView2)
app.mount('#app')

is correct.

answered Jan 30 '23 at 14:49

Baraja Swargiary

381
2
10

Vue 3 - "Failed to resolve component" with global components

4 Answers4

Linked