Vue.js unknown custom element

Question

I'm a beginner with Vue.js and I'm trying to create an app that caters my daily tasks and I ran into Vue Components. So below is what I've tried but unfortunately, it gives me this error:

vue.js:1023 [Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

Any ideas, help, please?

new Vue({    el : '#app',    data : {      tasks : [        { name : "task 1", completed : false},        { name : "task 2", completed : false},        { name : "task 3", completed : true}      ]    },    methods : {        },    computed : {        },    ready : function(){      }    });    Vue.component('my-task',{    template : '#task-template',    data : function(){      return this.tasks    },    props : ['task']  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.js"></script>  <div id="app">    <div v-for="task in tasks">        <my-task :task="task"></my-task>    </div>      </div>    <template id="task-template">    <h1>My tasks</h1>    <div class="">{{ task.name }}</div>  </template>

Answer 1

You forgot about the components section in your Vue initialization. So Vue actually doesn't know about your component.

Change it to:

var myTask = Vue.component('my-task', {  template: '#task-template',  data: function() {   return this.tasks; //Notice: in components data should return an object. For example "return { someProp: 1 }"  },  props: ['task'] });  new Vue({  el: '#app',  data: {   tasks: [{     name: "task 1",     completed: false    },    {     name: "task 2",     completed: false    },    {     name: "task 3",     completed: true    }   ]  },  components: {   myTask: myTask  },  methods: {   },  computed: {   },  ready: function() {   }  }); 

And here is jsBin, where all seems to works correctly: http://jsbin.com/lahawepube/edit?html,js,output

UPDATE

Sometimes you want your components to be globally visible to other components.

In this case you need to register your components in this way, before your Vue initialization or export (in case if you want to register component from the other component)

Vue.component('exampleComponent', require('./components/ExampleComponent.vue')); //component name should be in camel-case 

After you can add your component inside your vue el:

<example-component></example-component>