[Vue warn]: Failed to resolve component: Step1Item:

Question

I get the error above as I am trying to use the v-for directive on a component in a component.

This is working and iterating through some data stored in participants

<template>
    <div
        v-for="(participant, index) in participants"
        v-bind:key="index"
        >
        hello world
    </div>
</template>

But changing to this gives me the above error.

<template>
    <Step1Item
        v-for="(participant, index) in participants"
        v-bind:key="index"
        >
        hello world
    </Step1Item>
</template>

<script>
    import Step1Item from "./Step1Item.vue";

    export default {
        name: "Step1",
        components: Step1Item,
    [...] 
</script>

The component is:

<template>
    <div>
        {{ name }}
    </div>
</template>

<script>
export default {
    name: "Step1Item",
    props: {
        name: String,
    },
};
</script>

You can also check this out, worked for me https://stackoverflow.com/questions/66024797/vue-3-failed-to-resolve-component-with-global-components — Shallon Kobusinge, Apr 29 '21 at 10:17
Check this out, it worked for me https://stackoverflow.com/questions/66024797/vue-3-failed-to-resolve-component-with-global-components — Shallon Kobusinge, Apr 29 '21 at 10:19

score 7 · Accepted Answer · answered Nov 14 '20 at 17:06

7

You're writing the components option incorrectly, it should be :

 components: {Step1Item},

components option has value as object of componentName:component pairs but you could write it with shorthand syntax components: {component1,component2,...},

answered Nov 14 '20 at 17:06

Boussadjra Brahim

82,684
19
144
164

2

Thank you so much. I just wasted over 2 hours because I added components as an array instead of an object. – aayushgupta May 28 '21 at 11:16

[Vue warn]: Failed to resolve component: Step1Item:

1 Answers1

Linked