Elemento personalizado desconhecido Vue.js

Sou um iniciante em Vue.js e estou tentando criar um aplicativo que atenda às minhas tarefas diárias e encontrei o Vue Components. Abaixo está o que eu tentei, mas infelizmente, me deu este erro:

vue.js: 1023 [Aviso Vue]: Elemento personalizado desconhecido: - você registrou o componente corretamente? Para componentes recursivos, certifique-se de fornecer a opção "nome".

Alguma ideia, ajuda, 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>

Você esqueceu a componentsseção em seu Vue initialization. Portanto, o Vue na verdade não sabe sobre o seu componente.

Altere para:

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

 }

});

E aqui está o jsBin, onde tudo parece funcionar corretamente: http://jsbin.com/lahawepube/edit?html,js,output

ATUALIZAR

Às vezes, você deseja que seus componentes sejam globalmente visíveis para outros componentes.

Neste caso, você precisa registrar seus componentes desta forma, antes de seu Vue initializationou export(no caso se você deseja registrar o componente de outro componente)

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

Depois de adicionar seu componente dentro de vue el:

<example-component></example-component>

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

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

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

atualizar

• HTML converte <anyTag> para<anytag>
• Portanto, não use letras de capitalização para o nome do componente
• Em vez de <myTag>usar<my-tag>

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

Isso resolveu para mim: eu forneci um terceiro argumento sendo um objeto.

in app.js(trabalhando com laravel e webpack):

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

Não abuse Vue.component(), ele registra componentes globalmente. Você pode criar o arquivo, nomeá-lo como MyTask.vue, exportar para lá o objeto Vue https://vuejs.org/v2/guide/single-file-components.html e depois importar em seu arquivo principal, e não se esqueça de registrá-lo :

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

Certifique-se de ter adicionado o componente aos componentes.

Por exemplo:

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

Esta é uma boa maneira de criar um componente 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'
});

Eu estava acompanhando a documentação do Vue em https://vuejs.org/v2/guide/index.html quando me deparei com esse problema.

Mais tarde, eles esclarecem a sintaxe:

Até agora, registramos apenas componentes globalmente, usando Vue.component:

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

Os componentes registrados globalmente podem ser usados ​​no modelo de qualquer instância raiz do Vue (novo Vue) criado posteriormente - e até mesmo dentro de todos os subcomponentes da árvore de componentes da instância do Vue.

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

Então, como Umesh Kadam disse acima, apenas certifique-se de que a definição do componente global venha antes da var app = new Vue({})instanciação.

Eu tive o mesmo erro

[Vue warn]: Elemento personalizado desconhecido: - você registrou o componente corretamente? Para componentes recursivos, certifique-se de fornecer a opção "nome".

entretanto, esqueci totalmente de começar npm install && npm run deva compilar os arquivos js.

talvez isso ajude novatos como eu.

OK, esse erro pode parecer óbvio, mas um dia eu estava procurando uma resposta APENAS PARA SABER QUE EU TINHA 2 vezes declarados COMPONENTES . estava me deixando louco, já que o VueJS não reclama quando você declara 2 vezes, óbvio que eu tinha muito código no meio, e quando adicionei um novo componente, coloquei a declaração no topo, embora também tivesse um perto do fundo. Então, da próxima vez que procurar isso primeiro, economizará muito tempo