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

[jiangfengming]

JSFiddle: http://jsfiddle.net/fenivana/wso9prne/

Vue.js version: latest

tree.js:

module.exports = {
    name: 'v-tree',
  props: ['list'],
  template: '<ul>' +
              '<li v-for="item in list">{{item.value}}' + 
                '<v-tree v-if="item.children" :list="item.children"></v-tree>' + 
              '</li>' +
            '</ul>'
};

app.js:

var tree = require('./tree');

// registered the tree component with a different name
// e.g. add namespace
// this will cause error
Vue.component('ns-tree', tree);

// but if I registered it with
// Vue.component('ns-tree', Vue.extend(tree));
// this works fine.

new Vue({
    el: 'body',
    data: {
        list: [
        { value: 'foo' },
        { value: 'bar', children: [
          { value: 'baz' }
        ] }
      ]
    }
});

app.html:

<ns-tree :list="list"><</ns-tree>

Throws error:

VM408 vue.js:1018 [Vue warn]: Unknown custom element: <v-tree> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

Using Vue.component('ns-tree', Vue.extend(tree)) works fine, but this is verbose, and I need to tell the users of this component that you need to call Vue.extend() before Vue.component(), or you must register as the same name as the internal name.

[kazupon]

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/

[yyx990803]

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

[kazupon]

@yyx990803
So that means, if we specified component included name option to Vue.components(), Should we register the component, not global id but name option?

[jiangfengming]

@kazupon The component is published on npm and github, the author doesn't know what name the users will use.

Vue.component('id', {
  name: 'internal-name',
 ...
})

id is for outside use, name is for internal use.

I think we can check whether name is defined at global-api.js:213

if (!definition.name) {
  definition.name = id
}

[kazupon]

@fenivana
Thanks for your explanation!

Oh, I see.
I'll try to fix this issue.

[jiangfengming]

@kazupon Thanks! I really like the quick response of Vuejs Team, you're awesome!

[yyx990803]

Closed via #3040

[peshkov3]

@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

[fingerpich]

How do i set different name and id in .vue file?

[EmadAdly]

@fingerpich

<script>
export default {
  name: 'is-name',
...
</script>

[fingerpich]

@EmadAdly I want to have different name and id in .vue file because I have used a component recursively.
how do you set the id (global name)?

[appurist]

@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.

[appurist]

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.

[lethak]

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

I am running into this right now

[YellowPanda11]

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

[KimAbliter]

I also have same issue, it displays "Unknown custom element: < random-quote > - did you register the component correctly? For recursive components, make sure to provide the "name" option."
This is the library I use: https://github.com/laravue/laravue
here is my code:

• app.js

var Vue = require('vue')
Vue.config.debug = true // Comment this line for production

new Vue({
    el: '#app',
    created: function() {
        this.laravue.init.call(this, ['home']);
    },
    data: {
        laravue: require('./laravue.coffee')
    },
    components: require('./components.coffee') 
})

• components.coffee
  ```module.exports =

  Custom Elements

  'titles': require './components/title.coffee'
  'random-quote': require './components/random-quote.coffee'

  Views

  'home-view': require './views/home.coffee'

- random-quote.coffee

module.exports =
template: require './random-quote.template.html'
created: () ->
random = Math.floor(Math.random() * 6)
@quote = @quotes[random]

data: () ->
    ret =
        quote: ''
        quotes: [
            "Notice the small things. The rewards are inversely proportional."
            "Even the largest avalanche is triggered by small things."
            "Great things are done by a series of small things brought together."
            "Great things are not done by impulse, but by a series of small things brought together."
            "Coming together is a beginning; keeping together is progress; working together is success."
            "From small beginnings come great things."
        ]

- random-quote.template.html

{{quote}}

```

[tomexx]

Any success solving this?

[MaximStone]

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!

[iambrennanwalsh]

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

[JivanRoquet]

@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 :)

[Spartaques]

Thx you a lot:)

[shohruh2241759]

components:{
'task': require('components/Task.vue').default
}

it is not working who is known this