NuxtN
Nuxt11mo ago
4 replies
Tom

resolveComponent not working as expected

const formatBlockName = (): string => {
    const type = props.data.blockType as string;
    const typeFormatted = type.slice(0, 1).toUpperCase() + type.slice(1);
    return `Block${typeFormatted}`;
};

const blockName = formatBlockName();

Returns BlockContentSection
const Block = resolveComponent(blockName);
const Block2 = resolveComponent('BlockContentSection');

Block2 renders Block gives error Failed to resolve component: BlockContentSection

The template code is
<component :is="Block" :data />
<component :is="Block2" :data />


I'm unsure why this is happening. Why Block doesn't and Block2 does, other than it will only accept a direct string in to resolveComponents but that defeats the purpose of them being dynamic.
Was this page helpful?