VueJS component not rendering

Question

I have a very basic VueJS app which I'm building by following the website.

Here's the code, why is this component not rendering?

HTML:

    <script src="https://unpkg.com/vue"></script>
    
    <div id="app">
      <p>{{ message }}</p>
    </div>
    
    <div>
    <ol>
      <todo-item></todo-item>
    </ol>
    </div>

JS:

    new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue.js!'
      }
    })
    
    Vue.component('todo-item', {
        template: '<li>This is a list item</li>'
    })

Your <todo-item> is outside of <div id="app">, which is the Vue mount point. — yuriy636
– yuriy636, Commented Jun 28, 2017 at 14:39
@yuriy636 doesn't work even if I put my <ol> inside div#app .. link — qweqwe
– qweqwe, Commented Jun 28, 2017 at 14:42

yuriy636 · Accepted Answer · 2019-03-11 18:16:02Z

54

Use the component inside of the specified el mount element
Define the component before initializing the Vue instance with new Vue

Vue.component('todo-item', {
  template: '<li>This is a list item</li>'
})

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <ol>
    <todo-item></todo-item>
  </ol>
  <p>{{ message }}</p>
</div>

<div>

</div>

edited Mar 11, 2019 at 18:16

answered Jun 28, 2017 at 14:49

yuriy636

11.7k6 gold badges39 silver badges43 bronze badges

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

4 Comments

Byscripts Over a year ago

This one is the correct answer. And according to the doc, it's indeed required to declare component BEFORE instantiating Vue :)

Yann Bertrand Over a year ago

You should really take a look at the single file component structure instead of defining every component in one file if you want a to enlarge your application.

Robert Wildling Over a year ago

I just became aware of the fact that I obviously down-voted this answer quite some time ago. I have no idea why and assume that I clicked by mistake. However, meanwhile I cannot undo it, my choice is "locked", unless the answer will be edited. So I ask the yuriy636 to edit something in her/his answer so I can undo my stupid downvote. I am really sorry for that!

Robert Wildling Over a year ago

Glad you got the message and could edit your answer, @yuriy636! I could turn-around my vote into an up-vote! Thanks for your understanding!

tony19 · Accepted Answer · 2022-07-15 20:10:09Z

14

Better, you can use the Single File Components to define the todo-item component inside another file:

app.vue

 import TodoItem from './components/todo-item'

 new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  },
  components: {
    TodoItem
  }
})

components/todo-item.vue

<template>
  <li>This is a list item</li>
</template>

<script>
  export default {
    name: 'todo-item'
  }
</script>

In many Vue projects, global components will be defined using Vue.component, followed by new Vue({ el: '#container' }) to target a container element in the body of every page.

This can work very well for small to medium-sized projects, where JavaScript is only used to enhance certain views. In more complex projects however, or when your frontend is entirely driven by JavaScript, these disadvantages become apparent:

Global definitions force unique names for every component

String templates lack syntax highlighting and require ugly slashes for multiline HTML

No CSS support means that while HTML and JavaScript are modularized into components, CSS is conspicuously left out

No build step restricts us to HTML and ES5 JavaScript, rather than preprocessors like Pug (formerly Jade) and Babel

All of these are solved by single-file components with a .vue extension, made possible with build tools such as Webpack or Browserify.

edited Jul 15, 2022 at 20:10

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Jun 28, 2017 at 14:41

Yann Bertrand

3,1141 gold badge25 silver badges40 bronze badges

3 Comments

Austin Mullins Over a year ago

That doesn't work in the Fiddle for me on Chrome. Do you think the Fiddle just loads Vue incorrectly?

Yann Bertrand Over a year ago

I've added some explanations

Byscripts Over a year ago

Vue.Component('...') will declare the component globally. It's wrong to use Vue.Component inside components {}

tno2007 · Accepted Answer · 2019-02-12 13:42:22Z

4

My components was also not rendering.

In case it's not that obvious, like it was to me, take a look at how you are importing components.

For example, first I had:

import { CurrencyConverter } from "./CurrencyConverter.vue";

And had to remove the brackets, so it looked like this:

import CurrencyConverter from "./CurrencyConverter.vue";

Ofcourse, this means in your component you use the syntax:

export default {
    name: "CurrencyConverter",
}

answered Feb 12, 2019 at 13:42

tno2007

2,20829 silver badges19 bronze badges

Comments

Anyany Pan · Accepted Answer · 2019-05-31 02:48:50Z

1

I just have similar problem. After I try what @yuriy636 said it still not rendering. And I found that there is a component declaration in componets field like this:

Vue.component('todo-item', {
    template: '<li>This is a list item</li>',
})

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  },
  components: {
    'todo-item': 'todo-item',  <--- see this ?
  }
})

After I remove 'todo-item': 'todo-item'. It works!

Hope this help other guys!

answered May 31, 2019 at 2:48

Anyany Pan

7978 silver badges11 bronze badges

Collectives™ on Stack Overflow

VueJS component not rendering

4 Answers 4

4 Comments

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related