Unknown custom element Vue js
I am a beginner with Vue JS and I am trying to build an application that serves my daily tasks and I am running into Vue Components. So here's what I 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, be sure to specify the name parameter.
Any ideas please help?
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>
source to share
You forgot about the section components
in yours Vue initialization
. So Vue doesn't actually 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 the jsBin where everything seems to be working 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 this way, before Vue initialization
or export
Vue initialization
(in case you want to register a component from another component)
Vue.component('exampleComponent', require('./components/ExampleComponent.vue')); //component name should be in camel-case
After you can add your component to yours vue el
:
<example-component></example-component>
source to share
Just define Vue.component()
before new vue()
.
Vue.component('my-task',{
.......
});
new Vue({
.......
});
Update
- HTML converts
<anyTag>
to<anyTag>
- So don't use capital letters for the component name.
<myTag>
Use instead<my-tag>
Github issue: https://github.com/vuejs/vue/issues/2308
source to share
I was following the Vue documentation at https://vuejs.org/v2/guide/index.html when I ran into this problem.
They later refine the syntax:
So far we have only registered components globally using Vue.component:
Vue.component('my-component-name', { // ... options ... })
Globally registered components can be used in the template of any root Vue instance (new Vue) that is created subsequently, and even within all subcomponents of that component tree of Vue instances.
( https://vuejs.org/v2/guide/components.html#Organizing-Components )
Since Umesh Kadam says above, just make sure the definition of the global component occurs before instantiation var app = new Vue({})
.
source to share
Don't overuse Vue.component()
, it registers components worldwide. You can create a file, name it MyTask.vue, export the Vue object there https://vuejs.org/v2/guide/single-file-components.html and then import into your main file and don't forget to register it:
new Vue({
...
components: { myTask }
...
})
source to share