33

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>

5 Answers 5

50

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');
1
  • 1
    The key part is sequence I was adding component after mounting app. above example is perfect fix for it.
    – Khagesh
    Jan 23, 2023 at 13:04
2

For me it was declaring components in array:

components: [ActiveUser, UserData]

which should have been in an object:

components: {ActiveUser, UserData}
1

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

1

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

-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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.