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>

Ilyas karim · Accepted Answer · 2018-12-06 09:24:54Z

137

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>

edited Dec 6, 2018 at 9:24

Ilyas karim

4,8124 gold badges35 silver badges48 bronze badges

answered Sep 8, 2016 at 4:12

GONG

4,0461 gold badge26 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Juliver Galleto Over a year ago

So If I have many components, I should then bind it on the components array?

GONG Over a year ago

@CodeDemon for sure. You can make it shorter if you will use ES6, like so components: {myTask}, Or if its some small component, you can create it inside components property. But it seems like not good way, because of app scale.

Juliver Galleto Over a year ago

Any ideas why I have this Vue warning : vue.js:1023 [Vue warn]: data functions should return an object. (found in component: <my-task>)?

GONG Over a year ago

you need to write it like so in components: data: function() { return { property1: 1, property2: 2 } }

mehul9595 Over a year ago

for my case, I had spelled components incorrectly as component. hence, I got this error.

Umesh Kadam · Accepted Answer · 2017-04-27 15:46:53Z

65

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

edited Apr 27, 2017 at 15:46

answered Apr 19, 2017 at 10:21

Umesh Kadam

1,17911 silver badges16 bronze badges

1 Comment

Fabián Over a year ago

This should be the main answer to the problem. I can confirm from the vuejs docs and by trying it that Vue.component should be placed before the root (or new Vue({})).

migli · Accepted Answer · 2021-07-31 15:16:59Z

5

I just spared 1 hour with this message - usually easy to solve.

I got this error because I forgot to close my <script> tag in the parent component.

The browser console & my code editor gave no indication unfortunately.

answered Jul 31, 2021 at 15:16

migli

3,2381 gold badge33 silver badges34 bronze badges

2 Comments

Juliver Galleto Over a year ago

mine is the dumbest, I put the component outside the #app element that's why it keep saying "component not found"

4 R4C81D Over a year ago

Thanks kind stranger,i spent like 3 hours on this and you saved my time.

Dave · Accepted Answer · 2021-02-01 07:11:07Z

4

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

answered Feb 1, 2021 at 7:11

Dave

1,4392 gold badges18 silver badges16 bronze badges

Comments

Alex Sysoiev · Accepted Answer · 2021-11-05 02:02:04Z

4

In my case I had import {component} from "@/path/to/component.vue"

Changing it to import component from "@/path/to/component.vue" fixed the issue.

answered Nov 5, 2021 at 2:02

Alex Sysoiev

1388 bronze badges

Comments

tony19 · Accepted Answer · 2022-07-15 01:55:19Z

4

Don't overuse Vue.component(), it registers components globally. You can create file, name it MyTask.vue, export there Vue object https://v2.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 }
...
})

edited Jul 15, 2022 at 1:55

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Oct 25, 2018 at 8:05

Arthur Kuznetsov

414 bronze badges

Comments

Vineeth Sai · Accepted Answer · 2018-09-29 13:13:21Z

3

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'
});

edited Sep 29, 2018 at 13:13

Vineeth Sai

3,4657 gold badges26 silver badges34 bronze badges

answered Sep 29, 2018 at 9:36

Martijn van der Bruggen

313 bronze badges

Comments

Ronald Stevens · Accepted Answer · 2020-09-29 11:51:22Z

3

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

answered Sep 29, 2020 at 11:51

Ronald Stevens

311 bronze badge

1 Comment

scil Over a year ago

I save kind of same problems. I use a image manager in OrchardCore.Midia, and on the same page, I include vue using <script src="..."></script. Vue not work until I remove vue from the image manager. One day, I include BootstrapVue in the same page, it not work and report Unknown custom element: <b-alert> until I remove vuedraggable from the image manager.

Wouter Schoofs · Accepted Answer · 2018-09-10 23:44:39Z

2

Be sure that you have added the component to the components.

For example:

export default {
data() {
    return {}
},
components: {
    'lead-status-modal': LeadStatusModal,
},
}

answered Sep 10, 2018 at 23:44

Wouter Schoofs

9869 silver badges13 bronze badges

Comments

Eduardo Paoli · Accepted Answer · 2018-07-30 21:45:10Z

0

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'
});

answered Jul 30, 2018 at 21:45

Eduardo Paoli

1173 bronze badges

Comments

tony19 · Accepted Answer · 2022-07-15 01:19:51Z

0

I was following along the Vue documentation at https://v2.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://v2.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.

edited Jul 15, 2022 at 1:19

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Jun 8, 2018 at 21:28

Nathaniel Rink

5236 silver badges21 bronze badges

Collectives™ on Stack Overflow

Vue.js unknown custom element

11 Answers 11

5 Comments

1 Comment

2 Comments

Comments

Comments

Comments

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

11 Answers 11

5 Comments

1 Comment

2 Comments

Comments

Comments

Comments

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related