How to have indirectly self nested components in Vue JS 2?

7
votes

I manage to create directly self nested components using the name property and all works perfectly.

<template>
    <div>
        <span>Hi, I'm component A!</span>
        <component-a></component-a>
    </div>
</template>

<script>
    export default {
        name: 'component-a',
        components: {
            'component-a': this
        }
    }
</script>

Now, I want to create indirectly self nested components. Something like this:

ComponentA.vue:

<template>
    <div>
        <span>Hi, I'm component A!</span>
        <component-b v-if="hasItems" v-for="item in items" :item="item"></component-b>
    </div>
</template>

<script>
    import ComponentB from './ComponentB.vue'

    export default {
        name: 'component-a',
        components: {
            'component-b': ComponentB
        },
        props: ['items'],
        computed: {
            hasItems() {
                return this.items.length > 0
            }
        }
    }
</script>

ComponentB.vue:

<template>
    <div>
        <span>Hi, I'm component B!</span>
        <component-a v-if="hasItems" :items="item.items"></component-a>
    </div>
</template>

<script>
    import ComponentA from './ComponentA.vue'

    export default {
        name: 'component-b',
        components: {
            'component-a': ComponentA
        },
        props: ['item'],
        computed: {
            hasItems() {
                return this.item.items.length > 0
            }
        }
    }
</script>

But that fails. I get the following error:

[Vue warn]: Failed to mount component: template or render function not defined. (found in component )

Has anyone came across something like this and was able to solve it? According to the documentation we have control recursive components with conditional rendering that what I am doing... I even tried to use the name prop on the components but it did nothing (nor I think it should since the components are not directly self-nested).

2
javascriptvue.jsvue-component

2 Answers

5
votes

I tried your code and I also ended up with the same error, without a clue on how to proceed. Later I closed my vue-cli and tried directly using vue.js from a CDN (standalone version), and it worked alright.

Here is the working example: https://jsfiddle.net/mani04/z09Luphg/

There is no magic going on here. Component A and Component B call each other with a counterValue. Once the counterValue reaches some limit, the recursion stops.

If you do not get a better answer, and if you are unable to modify your app architecture, you can try using this standalone vue.js method.

EDIT: more info below

On further research today, I came across this github discussion on webpack cyclical imports / circular dependencies: https://github.com/webpack/webpack/issues/1788

The standalone jsFiddle example above does not require any ES6 imports. In my sample code, Vue.js registers components globally before initiating the app. Therefore it works without any issues.

In summary, this does not look like an issue with Vue.js, but a webpack / es6 limitation based on current info. I may be wrong, please keep exploring further!

3
votes

There is actually some good documentation and some different solutions for this issue, such as using asynchronous Webpack imports or registering self needed components globally. 

<template>
    <div>
        <span>Hi, I'm component A!</span>
        <component-a></component-a>
    </div>
</template>

<script>
    export default {
      name: 'component-b',
      components: {
         // async import: 
         ComponentA: () => import('./ComponentA.vue')
      }
  }
</script>