Component not rendering when using vue-template

Question

I have the following...

main.vue

<template>
    <div>
        <header></header>
    </div>
</template>
<script>
    export default {}
</script>

header.vue

<template>
    <div>{{ message }}</div>
</template>
<script>
    export default {
        data: () => {
            return {
                message: 'Dashboard'
            }
        }
   };
</script>

main.js

import Vue from 'vue';
import Header from './header.vue'
import App from './main.vue'
Vue.component("header", Header);
new Vue(App).$mount('#km-viewport')

But when I run this the header component is never rendered. What am I missing? Does using the vue-template webpack plugin require something special here?

I have looked at a couple similar stack overflows and I have tried to use components: { Header } instead but that still doesn't work.

I also tried...

main.vue

<template>
    <div>
        <header></header>
    </div>
</template>
<script>
    import Header from './header.vue'
    export default {
      components:{
        "header": Header
      }
    }
</script>

header.vue

<template>
    <div>{{ message }}</div>
</template>
<script>
    export default {
        data: () => {
            return {
                message: 'Dashboard'
            }
        }
   };
</script>

main.js

import Vue from 'vue';
import App from './main.vue'
Vue.component("header", Header);
new Vue(App).$mount('#km-viewport')

Where's the import Header from './header.vue', you have one, don't you? — acdcjunior
– acdcjunior, Commented Mar 7, 2018 at 0:03
Sorry it is in the main.js I deleted it on accident when copying but that doesn't fix it. — JGleason
– JGleason, Commented Mar 7, 2018 at 14:03

tony19 · Accepted Answer · 2022-07-16 01:05:20Z

1

Yours is a frequent problem:

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

In your case <header> is a reserved HTML element.

The same happens to <main>, <article> and so on.

Solution: Rename your header component to other name.

Example (I renamed header to header2):

main.vue

<template>
    <div>
        <header2></header2>
    </div>
</template>
<script>
    import Header from './header.vue'
    export default {
      components:{
        "header2": Header
      }
    }
</script>

header.vue

<template>
    <div>{{ message }}</div>
</template>
<script>
    export default {
        data() {
            return {
                message: 'Dashboard'
            }
        }
   };
</script>

Bonus: Don't use arrow functions as in data: () => {, that will give you problems. Use like data() {. This rule applies to methods, computeds, watchers and all other Vue instance options.

edited Jul 16, 2022 at 1:05

tony19

140k24 gold badges281 silver badges354 bronze badges

answered Mar 7, 2018 at 16:27

acdcjunior

136k37 gold badges341 silver badges312 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

JGleason Over a year ago

I tried this by adding a prefix like you suggest but it still isn't working.

acdcjunior Over a year ago

What prefix? Did I suggest a prefix?

JGleason Over a year ago

kinda instead of adding a postfix (your suggestion with the 2) I created a prefix (my-header). This is since according to the HTML spec they are supposed to be prefixed

Collectives™ on Stack Overflow

Component not rendering when using vue-template

1 Answer 1

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

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

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

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related

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