[javascript] Vue.js unknown custom element

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?

_x000D_
_x000D_
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_
_x000D_
_x000D_

This question is related to javascript vue.js

The answer is


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

  • HTML converts <anyTag> to <anytag>
  • So don't use captital letters for component's name
  • Instead of <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.