Vuejs : Vue.component not seems to work

Question

I am unsure am I doing something wrong but the vuejs component I declared is not working.

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

<div id="app">
  <p>{{ message }}</p>

</div>

  <ol>
  <!-- Create an instance of the todo-item component -->
  <todo-item></todo-item>
</ol>

JavaScript:

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

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

I am using the JsFiddle, message part does display the data but the todo-item didn't show anything.

CUGreen · Accepted Answer · 2018-05-01 03:11:49Z

2

Your component needs to inside your "#app" div.

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

<div id="app">
    <p>{{ message }}</p>
    <ol>
        <!-- Create an instance of the todo-item component -->
        <todo-item></todo-item>
    </ol>
</div>

Here is a working fiddle.

answered May 1, 2018 at 3:11

CUGreen

3,2042 gold badges17 silver badges22 bronze badges

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

Comments

tony19 · Accepted Answer · 2022-07-15 23:56:50Z

2

Vue.component has to be called before new Vue in order for the Vue instance to use the component. From the docs (which aren't all that clear on this, admittedly):

These components are globally registered. That means they can be used in the template of any root Vue instance (new Vue) created after registration.

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

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

That, and your app's code has to all be inside of the #app div, as pointed out by CUGreen's answer.

edited Jul 15, 2022 at 23:56

tony19

140k24 gold badges281 silver badges354 bronze badges

answered May 1, 2018 at 3:11

kingdaro

12.1k3 gold badges37 silver badges38 bronze badges

1 Comment

LittleFunny Over a year ago

it make sense.... vuejs.org/v2/guide/index.html I follow this link but I can't see that sentence.

Collectives™ on Stack Overflow

Vuejs : Vue.component not seems to work

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related