I've recently integrated Vue.js into my Laravel project and encountered an issue when trying to call a component within another component. After running the command npm run dev, I received a webpack error.
Here is the code snippet from my parent component, TabelReception.vue:
<template>
<stats-card></stats-card>
<table class="table">
<tbody>
</tbody>
</table>
</template>
<script>
import StatsCard from './StatsCard'
Vue.component('StatsCard', StatsCard)
export default {
components: {
'stats-card': StatsCard
}
}
</script>
The child component, StatsCard.vue:
<template>
<h2>
hi bro just a test
</h2>
</template>
<script>
export default {
}
</script>
And here's a snippet from my app.js file:
import Vue from 'vue'
Vue.component('reception-table', require('./components/TableReception.vue').default);
Vue.component('stats-card', require('./components/StatsCard.vue').default);
const core = new Vue({
el: '#core'
});
If anyone could provide some guidance on this issue, it would be greatly appreciated.