CODEWITHSUNDEEP
vue.js
user7699223
user7699223

Reputation:

Vue basics -- use component in other component

I'm trying to use a Vue component (a header) inside of another component, but it's not rendering it correctly.

My code:

App.vue:

<template>
  <div id="app">
    <header></header>
  </div>
</template>

<script>
export default {
  name: 'app'
}
</script>

Header.vue:

<template>
    <nav class="nav">
         <div class="container">
             <div class="nav-left">
                 <p class="title"></p>
             </div>
         </div>
     </nav>
</template>

<script>
export default {
  name: 'header'
}
</script>

And, I register my component in main.js, with the file looking like this:

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.component('header', require('./components/Header'))

Vue.config.productionTip = false

new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})

With my very limited understanding this should be like rendering a React <Header /> in my App, but this is not working that way. What's getting rendered to the DOM is a plain <header></header> tag inside of my #app, which isn't exactly ideal.

What key point am I missing? Thanks!

Upvotes: 4

Views: 11416

Answers (1)

Bert
Bert

Reputation: 82439

You cannot name a component with the name of an existing HTML tag. The development version of Vue will warn you of this in the console.

[Vue warn]: Do not use built-in or reserved HTML elements as component id: header

Rename your header component with some other name.

Upvotes: 15

Related Questions