When I declare my Vue components in the top level HTML file, everything works fine. Here is an example:
<body>
<div class='app' id='app'>
<header-bar id='headerBar'></header-bar>
<journal-page></journal-page>
</div>
<script src="js/app.js"></script>
</body>
However, if I try to use a <journal-card> component inside the <journal-page> component, I get this error message:
[Vue warn]: Failed to resolve component: journal-card at
<JournalPage>.
How can I resolve this issue?
Below is the code from my main script file 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');
Here's the content of 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 here is the journal-card.vue component:
<template>
<div>
This is a journal entry
</div>
</template>
<script lang="js">
export default {
data: null,
props: [ 'entry' ]
};
</script>