Vue Components Need to be Registered Before Use

Vue.js has components. Based on its official website, a component can look like this:

<ol>
  <!-- Create an instance of the todo-item component -->
  <todo-item></todo-item>
</ol>
<script>
Vue.component('todo-item', {
  template: '<li>This is a todo</li>'
})
</script>

But with the above code, the component will not show on the website, because the component is not registered.

You need to register the component in a vue app like the following:

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

<script>
Vue.component('todo-item', {
  template: '<li>This is a todo</li>'
})
var app = new Vue({el:"#app"});
//or just new Vue({el:"#app"});
</script>