I have been attempting to implement nested single file components, but it's not working as expected. Below is a snippet of my main.js file :
import Vue from 'vue'
import BootstrapVue from "bootstrap-vue"
import App from './App.vue'
import "bootstrap/dist/css/bootstrap.min.css"
import "bootstrap-vue/dist/bootstrap-vue.css"
Vue.use(BootstrapVue);
new Vue({
el: '#app',
template: '<App/>',
components: { App }
})
Here is the content of my App.vue file :
<template>
<div>
<menu/>
<span>This text works</span>
</div>
</template>
<script>
import menu from "./components/menu.vue";
export default {
components: {
"menu": menu
}
}
</script>
Lastly, here is my menu.vue file :
<template>
<p>nothing show</p>
</template>
<script>
export default {
}
</script>
While the content in my App.vue template is being rendered successfully, the content of my menu template is not displayed.
Note: No errors are being thrown