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    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   lt script src  https   cdnjs cloudflare com ajax libs vue 1 0 26 vue js  gt  lt  script gt  x000D   lt div id  app  gt  x000D     lt div v-for  task in tasks  gt  x000D         lt my-task  task  task  gt  lt  my-task gt  x000D     lt  div gt  x000D     x000D   lt  div gt  x000D   x000D   lt template id  task-template  gt  x000D     lt h1 gt My tasks lt  h1 gt  x000D     lt div class    gt    task name    lt  div gt  x000D   lt  template gt  x000D   x000D   x000D

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

Just define Vue component   before new vue     Vue component  my-task                      new Vue                     update   HTML converts  lt anyTag gt   to  lt anytag gt   So don t use captital letters for component s name Instead of  lt myTag gt  use  lt my-tag gt    Github issue   https   github com vuejs vue issues 2308

User · Answer

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

User · Answer

I had the same error   Vue warn   Unknown custom element   - did you register the component correctly  For recursive components  make sure to provide the  quot name quot  option   however  I totally forgot to run npm install  amp  amp  npm run dev to compiling the js files  maybe this helps newbies like me

User · Answer

Be sure that you have added the component to the components   For example   export default   data         return       components         lead-status-modal   LeadStatusModal

User · Answer

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    lt example-component gt  lt  example-component gt

User · Answer

This is a good way to create a component in vue   let template     lt ul gt     lt li gt Your data here lt  li gt   lt  ul gt     Vue component  my-task       template  template    data             props        task          type  String              methods            computed            ready               new Vue    el     app

User · Answer

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

[javascript] Vue.js unknown custom element

Examples related to javascript

Examples related to vue.js