[Vuejs]-Vuejs : Vue.component not seems to work

by

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.

👤CUGreen

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.

👤kingdaro

Leave a comment