How to import two VueJS components inside eachother?

Question

I have two components, an item component and a folder component. Each item contains it's own folder component, and each folder component contains a list of items.

So I am trying to use the item component in the folder component, and vice versa, however, I am getting the error: unknown custom element: <item> - did you register the component correctly? For recursive components, make sure to provide the "name" option. Despite the fact that I have the name option set on both components. Any ideas?

Code is below

item.vue

<template>
    <div class="item" style="height: 30px">
        . . .
        <folder v-if="item.hasChildren" :id="id"></folder>
    </div>
</template>


<script scoped>
import Folder from './folder.vue';

export default {
    name: 'item',
    props: ['id'],
    components: {
        Folder
    }
};

</script>

folder.vue

<template>
    <div class="folder">
        <template v-for="(child, index) in children">
            <item :last-item="index === children.length - 1" :key="child.id" :id="child.id"></item>
        </template>
    </div>
</template>

<script>
import Item from "./item.vue";

export default {
    name: 'folder',
    props: ['id', 'hasChildren'],
    components: {
        Item
    }
};
</script>

tony19 · Accepted Answer · 2022-07-15 20:57:05Z

5

This is probably happening because of the circular referencing between your components ..

When you look closely, you’ll see that these components will actually be each other’s descendent and ancestor in the render tree - a paradox!

To resolve this paradox you can either register your components globally using Vue.component, or you can defer the import of one of your components to a later point (by moving your import to the beforeCreate hook or using async components as demonstrated here) ..

folder.vue

<template>
    <div class="folder">
        <template v-for="(child, index) in children">
            <item :last-item="index === children.length - 1" :key="child.id" :id="child.id"></item>
        </template>
    </div>
</template>

<script>

export default {
    name: 'folder',
    props: ['id', 'hasChildren'],
    components: {
        'item': () => import('./item.vue')
    }
};

</script>

edited Jul 15, 2022 at 20:57

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Nov 7, 2018 at 20:52

Husam Elbashir

7,1953 gold badges20 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Phil Over a year ago

Why should OP use async components?

Husam Elbashir Over a year ago

@Phil I'll defer to you on this but in the docs they present it as a solution to circular referencing between components.

Phil Over a year ago

That's a great piece of information that should be mentioned in your answer. It gives people a reason to visit the links you provide

Daniel Fordyce · Accepted Answer · 2018-11-07 20:44:31Z

0

You need to provide the key (name) in the components object like so,

item.vue

components: {
    folder: Folder
}

folder.vue

components: {
    item: Item
}

answered Nov 7, 2018 at 20:44

Daniel Fordyce

192 bronze badges

1 Comment

Phil Over a year ago

That or use <Folder> and <Item>

Collectives™ on Stack Overflow

How to import two VueJS components inside eachother?

2 Answers 2

3 Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Related