javascript - Vue.js unknown custom element - Stack Overflow

admin管理员组

文章数量:1134599

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(){

  }

});

Vueponent('my-task',{
  template : '#task-template',
  data : function(){
    return this.tasks
  },
  props : ['task']
});

<script src=".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>

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>

• javascript
• vue.js

Share Improve this question Follow edited Feb 8, 2019 at 17:24 Pierce O'Neill 3831010 silver badges2424 bronze badges asked Sep 8, 2016 at 3:15 Juliver GalletoJuliver Galleto 9,0272727 gold badges9191 silver badges167167 bronze badges

Add a comment  | 

11 Answers 11

Sorted by: Reset to default 136

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>

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

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.

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

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.

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 }
...
})

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

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

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

For example:

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

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://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.

本文标签： javascriptVuejs unknown custom elementStack Overflow