Vue.js: Why isn't component rendered ?

Question

I wrote a very simple vue.js application to learn how to work with vue files.

Here is the code:

App.vue

<template>
    <article></article>
</template>

<script>

export default {
    data: function() {
        return {

        }
    }
}
</script>

<style>

</style>

main.js:

import Vue from 'vue'
import App from './App.vue'
import Article from './Article.vue';

Vue.config.productionTip = false;

Vue.component('article', Article);

new Vue({
  render: h => h(App),
}).$mount('#app');

Article.vue:

<template>
    <div>
        <h1>bla bla</h1>
    </div>
</template>

<script>
    export default {
        data() {
            return {

            };
        }
    }
</script>

I expect to see 'bla bla' in the browser. However, when I open the browser, I see white page. The console says:

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

and when I open Vue dev tools this is what I see:

No Article component has been added. Do you know how to solve it?

Brian Lee · Accepted Answer · 2018-12-02 09:04:32Z

1

Don't use the html tag article as a component name. Rename it and it should render.

For example:

Vue.config.productionTip = false;

Vue.component('article2', {
  template: '<div>Hi there</div>'
});

Vue.component('app', {
  template: '<article2></article2>'
})

new Vue({
  render: h => h('app'),
}).$mount('#app');

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app"></div>

answered Dec 2, 2018 at 9:04

Brian Lee

18.3k3 gold badges45 silver badges55 bronze badges

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

Comments

Moumen Soliman · Accepted Answer · 2018-12-02 08:58:10Z

0

Call components in main.js not the best structure + you don't call him in Vue instance, example:

Article.vue

<template>
    <div>
        <h1>bla bla</h1>
    </div>
</template>

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

App.vue

<template>
    <article></article>
</template>

<script>
import article from './Article';

export default {
    components: {
      article,
   },
}
</script>

main.js

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

Vue.config.productionTip = false;

new Vue({
  render: h => h(App),
}).$mount('#app');

I hope this work with you.

answered Dec 2, 2018 at 8:58

Moumen Soliman

1,6941 gold badge17 silver badges21 bronze badges

Comments

Bhojendra Rauniyar · Accepted Answer · 2018-12-02 08:59:42Z

0

It's because you're just rendering App:

render: h => h(App),

You should rather import Article in App and use like:

<template>
    <article></article>
</template>

<script>
import Article from './Article.vue'
export default {
    components: { article: Article },
    data: function() {
        return {

        }
    }
}
</script>

And remove the followings from App:

import Article from './Article.vue';

Vue.config.productionTip = false;

Vue.component('article', Article);

But article is html5 element, so I suggest you to use another name like:

components: {
  myArticle: Article
}

<my-article></my-article>

answered Dec 2, 2018 at 8:59

Bhojendra Rauniyar

86k36 gold badges179 silver badges241 bronze badges

Collectives™ on Stack Overflow

Vue.js: Why isn't component rendered ?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related