Vue component looping through itself: Failed to mount component: template or render function not defined

Question

Can't seem be be able to figure out this one. I have a main wrapper component, which uses another component to render the navigation structure.

Navigation can be multi level deep, hence needs to be generated dynamically.

Wrapper looks like this:

<template>
    <nav v-if="this.navigation.length">
        <link-role :collection="navigation"></link-role>
    </nav>
</template>
<script>
    import LinkRole from './Formats/LinkRole';
    export default {
        components: {
            'link-role': LinkRole,
        },
        props: {
            navigation: {
                type: Object,
                default: () => { return {} }
            }
        }
    }
</script>

and LinkRole component like so:

<template>
    <ul>
        <li v-for="(item, index) in collection" :key="index">
            <a v-if="item.url" :href="item.url" v-text="item.name"></a>
            <span v-else v-text="item.name"></span>
            <link-role v-if="item.items" :collection="item.items"></link-role>
        </li>
    </ul>
</template>
<script>
    import LinkRole from './LinkRole';
    export default {
        components: {
            'link-role': LinkRole,
        },
        props: {
            collection: {
                type: [Object, Array],
                default: () => []
            }
        },
    }
</script>

As you can see within LinkRole I'm looping over over items in the collection and re-use itself LinkRole if there is another level of items .

With this approach I'm getting

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

but cannot figure out what is causing it.

Answer 1

According to the docs you need to provide a name option in your component in order to be able to use it recursively ..

Components can recursively invoke themselves in their own template. However, they can only do so with the name option

import LinkRole from './LinkRole';
export default {
    name: 'link-role',
    components: {
        'link-role': LinkRole,
    },
    props: {
        collection: {
            type: [Object, Array],
            default: () => []
        }
    },
}