It's my first Vue2 project, and I'm trying to create a component called Menu
which will be used in the app's main page.
I created the project using vue-cli
and my dependency manager is yarn
. I run the project by yarn run dev
.
This is my project structure:
myproject
- src
- components
- Menu.vue
- App.vue
- main.js
Menu.vue:
<template>
<ul class="nav">
<li class="active">
<a href="dashboard.html">
<i class="ti-panel"></i>
<p>Dashboard</p>
</a>
</li>
</ul>
</template>
<script>
export default {
name: 'Menu'
}
</script>
App.vue:
<template>
<div id="app" class="wrapper">
<div class="sidebar" data-background-color="white" data-active-color="danger">
<div class="sidebar-wrapper">
<div class="logo">
<a href="#" class="simple-text">
LOGO
</a>
</div>
<menu></menu>
</div>
</div>
</div>
</template>
<script>
import Menu from './components/Menu'
export default {
name: 'App',
components: {
'menu': Menu
}
}
</script>
main.js:
import Vue from 'vue'
import App from './App'
import Menu from './components/Menu'
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App, Menu },
template: '<App/>'
})
When running yarn run dev
no error is shown in the console, however the webpage shows a link with text "LOGO" and an empty <menu>
element, while I was expecting vue to replace that tag with the <template>
from Menu.vue
.
Why isn't it working? What am I missing?
You should be getting this error (not sure why you aren't seeing it):
[Vue warn]: Do not use built-in or reserved HTML elements as component id: menu
The fix would be to change the component name to something that isn't a reserved HTML element:
<script>
import MyMenu from './components/MyMenu'
export default {
name: 'App',
components: {
'my-menu': MyMenu
}
}
</script>