Elemento personalizado desconocido de Vue.js

Soy un principiante con Vue.js y estoy tratando de crear una aplicación que satisfaga mis tareas diarias y me encontré con Vue Components. Entonces, a continuación se muestra lo que he intentado, pero desafortunadamente, me da este error:

vue.js: 1023 [Vue warn]: elemento personalizado desconocido: - ¿registró el componente correctamente? Para componentes recursivos, asegúrese de proporcionar la opción "nombre".

¿Alguna idea, ayuda, por favor?

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>

Olvidaste la componentssección en tu Vue initialization. Entonces, Vue en realidad no conoce su componente.

Cámbielo a:

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

 }

});

Y aquí está jsBin, donde todo parece funcionar correctamente: http://jsbin.com/lahawepube/edit?html,js,output

ACTUALIZAR

A veces, desea que sus componentes sean visibles globalmente para otros componentes.

En este caso, debe registrar sus componentes de esta manera, antes de su Vue initializationo export(en caso de que desee registrar un componente del otro componente)

Vue.component('exampleComponent', require('./components/ExampleComponent.vue')); //component name should be in camel-case

Después de que pueda agregar su componente dentro de su vue el:

<example-component></example-component>

Solo defina Vue.component()antes new vue().

Vue.component('my-task',{
     .......
});

new Vue({
    .......
});

actualizar

• HTML se convierte <anyTag> a<anytag>
• Por lo tanto, no use letras capitales para el nombre del componente.
• En lugar de <myTag>usar<my-tag>

Problema de Github: https://github.com/vuejs/vue/issues/2308

Esto me resolvió: proporcioné un tercer argumento que es un objeto.

en app.js(trabajando con laravel y webpack):

Vue.component('news-item', require('./components/NewsItem.vue'), {
    name: 'news-item'
});

No lo use en exceso Vue.component(), registra componentes a nivel mundial. Puede crear un archivo, nombrarlo MyTask.vue, exportar allí el objeto Vue https://vuejs.org/v2/guide/single-file-components.html y luego importarlo en su archivo principal, y no olvide registrarlo :

new Vue({
...
components: { myTask }
...
})

Asegúrese de haber agregado el componente a los componentes.

Por ejemplo:

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

Esta es una buena forma de crear un componente en 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'
});

Estaba siguiendo la documentación de Vue en https://vuejs.org/v2/guide/index.html cuando encontré este problema.

Posteriormente aclaran la sintaxis:

Hasta ahora, solo hemos registrado componentes a nivel mundial, utilizando Vue.component:

   Vue.component('my-component-name', {
       // ... options ...
   })

Los componentes registrados globalmente se pueden usar en la plantilla de cualquier instancia raíz de Vue (nueva Vue) creada posteriormente , e incluso dentro de todos los> subcomponentes del árbol de componentes de esa instancia de Vue.

( https://vuejs.org/v2/guide/components.html#Organizing-Components )

Entonces, como dice Umesh Kadam anteriormente, solo asegúrese de que la definición del componente global venga antes de la var app = new Vue({})instanciación.

Tuve el mismo error

[Vue warn]: elemento personalizado desconocido: - ¿registró el componente correctamente? Para componentes recursivos, asegúrese de proporcionar la opción "nombre".

sin embargo, me olvidé por completo de ejecutar la npm install && npm run devcompilación de los archivos js.

tal vez esto ayude a los novatos como yo.

OK, este error puede parecer obvio, pero un día estaba buscando una respuesta SOLO PARA ENCONTRAR QUE TENÍA 2 veces declaradas COMPONENTES . me estaba volviendo loco ya que VueJS no se queja en absoluto cuando lo declaras 2 veces, obviamente tenía mucho código en el medio, y cuando agregué un nuevo componente, coloqué la declaración en la parte superior, mientras que también tenía uno cerca del fondo. Así que la próxima vez busque esto primero, ahorrará mucho tiempo