Vuejs nested components with single file components

Question

I'm trying to use nested single file components, but it doesn't work. This is 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 }
})

This is 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>

This is my menu.vue file :

<template>
    <p>nothing show</p>
</template>

<script>
    export default {
    }
</script>

The content in my App.vue template is rendered, but not for the content of my menu template.

Ps: No errors thrown

Answer 1

There's a native HTML5 <menu> element. You have to rename it to something else. You really should name all your components with a hyphen in the name to prevent this type of thing from happening. Check out the first notice here: https://v2.vuejs.org/v2/guide/components.html#Using-Components