CODEWITHSUNDEEP
templatesvuejs2components
JGleason
JGleason

Reputation: 3926

Component not rendering when using vue-template

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')

Upvotes: 0

Views: 1760

Answers (1)

acdcjunior
acdcjunior

Reputation: 135762

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.

Upvotes: 1

Related Questions