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({_x000D_
el : '#app',_x000D_
data : {_x000D_
tasks : [_x000D_
{ name : "task 1", completed : false},_x000D_
{ name : "task 2", completed : false},_x000D_
{ name : "task 3", completed : true}_x000D_
]_x000D_
},_x000D_
methods : {_x000D_
_x000D_
},_x000D_
computed : {_x000D_
_x000D_
},_x000D_
ready : function(){_x000D_
_x000D_
}_x000D_
_x000D_
});_x000D_
_x000D_
Vue.component('my-task',{_x000D_
template : '#task-template',_x000D_
data : function(){_x000D_
return this.tasks_x000D_
},_x000D_
props : ['task']_x000D_
});
_x000D_
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.js"></script>_x000D_
<div id="app">_x000D_
<div v-for="task in tasks">_x000D_
<my-task :task="task"></my-task>_x000D_
</div>_x000D_
_x000D_
</div>_x000D_
_x000D_
<template id="task-template">_x000D_
<h1>My tasks</h1>_x000D_
<div class="">{{ task.name }}</div>_x000D_
</template>
_x000D_
This question is related to
javascript
vue.js
This solved it for me: I supplied a third argument being an object.
in app.js
(working with laravel and webpack):
Vue.component('news-item', require('./components/NewsItem.vue'), {
name: 'news-item'
});
Be sure that you have added the component to the components.
For example:
export default {
data() {
return {}
},
components: {
'lead-status-modal': LeadStatusModal,
},
}
Just define Vue.component()
before new vue()
.
Vue.component('my-task',{
.......
});
new Vue({
.......
});
update
<anyTag>
to <anytag>
<myTag>
use <my-tag>
Github issue : https://github.com/vuejs/vue/issues/2308
OK, this error may seem obvious, but one day I was looking for an answer JUST TO FOUND OUT THAT I HAD 2 times COMPONENTS declared. it was driving me nuts as VueJS does not complain at all when you declare it 2 times, obvious I had a lot of code in between, and when I added a new component, I placed the declaration in the top, while I also had one close to the bottom. So next time looks for this first, saves a lot of time
I had the same error
[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.
however, I totally forgot to run npm install && npm run dev
to compiling the js files.
maybe this helps newbies like me.
Vue definitely has some bugs around this. I find that although registering a component like so
components: { MyComponent }
will work most of the time, and can be used as MyComponent or my-component automatically, sometimes you have to spell it out as such
components: { 'my-component' : MyComponent }
And use it strictly as my-component
Don't overuse Vue.component()
, it registers components globally. You can create file, name it MyTask.vue, export there Vue object
https://vuejs.org/v2/guide/single-file-components.html
and then import in your main file, and don't forget to register it:
new Vue({
...
components: { myTask }
...
})
This is a good way to create a component in vue.
let template = `<ul>
<li>Your data here</li>
</ul>`;
Vue.component('my-task', {
template: template,
data() {
},
props: {
task: {
type: String
}
},
methods: {
},
computed: {
},
ready() {
}
});
new Vue({
el : '#app'
});
I was following along the Vue documentation at https://vuejs.org/v2/guide/index.html when I ran into this issue.
Later they clarify the syntax:
So far, we’ve 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) created afterwards – and even inside all >subcomponents of that Vue instance’s component tree.
(https://vuejs.org/v2/guide/components.html#Organizing-Components)
So as Umesh Kadam says above, just make sure the global component definition comes before the var app = new Vue({})
instantiation.
Source: Stackoverflow.com