vue: Recursive components problem: Vue.component() does not respect "name" prop defined in options

BTW, I found this issue because I was getting the did you register the component correctly? error as well. It seems the name member of a single-file .vue component is ignored. I’ve stopped including the names there, and started naming them in the components: member where they are referenced (or globally as above), e.g.:

import MyComponent from '@/components/MyComponent.vue';
export default {
  components: {
    'my-component': MyComponent
  }

That will only be valid there, but the other approach above can be used for global registrations.

It seems more appropriate to me to only register them where they are used (locally), however I’m not sure of the performance impact of registering them locally repeatedly, if it’s a component nested within many components.

I think this is something that can be fixed since the expected behavior is reasonable.

@kazupon Thank you for your work! VueJS is awesome. Could you please correct the official example? (It does not contain ‘name’ attribute in Vue.component definition) https://vuejs.org/examples/tree-view.html

Indeed, name in single-file .vue component seems ignored.

I am running into this right now

@fingerpich I’m still working on some of these concepts myself, but I think you’d do the following to set the component name globally… In the same file where you create the Vue instance (i.e. where new Vue(...) is), above/before that Vue instance creation, add something like:

import MyComponent from '@/components/MyComponent.vue';
Vue.component('my-component',MyComponent)

new Vue(...) {

Defining them in the components: member in the app or another component makes them only available to the template used there.

@iambrennanwalsh thanks that’s helpful but the fact that you use the word name as the component’s name in this example couldn’t be more confusing.

I actually think that, given the context of this issue (back to its very title), there was no worse word to choose from in the whole English dictionary 😃

Hi! Thank you for your reporting!

You can use the name options at only Vue.extend(). Please see the below document. http://vuejs.org/api/#name

I think that you can resolve with a way the below jsfiddle URL. http://jsfiddle.net/kazupon/7u1xpaoh/1/

If any of the following is inaccurate, please feel free to let me know. I’m not an expert on the specifics, I’ve just been working with Vue.js for the past 3 weeks, and i thought I’d share what worked for me.

Specifying the ‘name’ within the Single File Component as instructed to do so above, did nothing for me. Instead what worked for me, was importing the component, and then assigning it a name within “components” of the root Vue instance…

 import Name from './name.vue'   

 // ..code code code

 new Vue({

 components: {'name': Name },

Heres the Single File Component (name.vue). And below is the root Vue Instance (root.vue). It may be important to note that root.vue is then required() into my main.js which is where I actually import Vue source files.

 // name.vue
 // The single file template.. Just a simple sentence with my name.

<template>
  <p>Hi, my name is {{ name }}.</p>
</template>

<script>
export default {
  data() {
    return {
      name: 'Brennan Walsh' } } }
</script>

<style scoped>
  p  { color: #d83018;}
</style>

 // root.vue
 // The root Vue instance.

<script>
import Name from './name.vue'   
//      ^  The only important thing about the import statement is that the Name above has
//  to be spelled exactly the same as where you see Name below in components. The two are 
//  case sensitive to eachother.

export default {   }	
//  Any .vue file that gets imported to another .js or .vue file must export something.  If it is the root
//  .vue instance, then it can be an empty project. Well at least in this case.. 

new Vue({

  components: {
   'name': Name },
 // 'name' here is what you will name your html tag. Name is exactly what you named 
// your import above. Usually after your filename.

  el: "#root",
 // 'Final note, if you try and render a component outside the root vue instance. you're going 
 //  to have a bad time.

  data: {
    activeList: '',
    addModal: false,
  },
}})

</script>

I can now render this component within #root using…

 <name></name>.

Dynamically importing the single-file component solved the issue for me.

I tried to dynamically register .vue components globally, but I have the same errors.

Can you explain what you did? And provide some code examples please. Thanks!

Dynamically importing the single-file component solved the issue for me.