I have two solutions, the first solution looks like to perform a bit better.
Solution with resolveComponent, and globaly import components through nuxt.config
<code> <component
v-if="isComponentExist(component)]"
:is="strapiComponents(component)"
/>
const isComponentExist = (component) => {
const componentName = component.__component.split('.').pop();
instance?.appContext.components[componentName(component)]
}
const strapiComponents = (component: string) => resolveComponent(componentName(component));
</code>
<code> <component
v-if="isComponentExist(component)]"
:is="strapiComponents(component)"
/>
const isComponentExist = (component) => {
const componentName = component.__component.split('.').pop();
instance?.appContext.components[componentName(component)]
}
const strapiComponents = (component: string) => resolveComponent(componentName(component));
</code>
<component
v-if="isComponentExist(component)]"
:is="strapiComponents(component)"
/>
const isComponentExist = (component) => {
const componentName = component.__component.split('.').pop();
instance?.appContext.components[componentName(component)]
}
const strapiComponents = (component: string) => resolveComponent(componentName(component));
Solution with defineAsyncComponent
<code> <component
:is="getComponent(component)"
/>
const getComponent = (component) => {
const componentName = component.__component.split('.').pop();
return defineAsyncComponent(() => import(`../Strapi/${componentName(component)}.vue`));
};
</code>
<code> <component
:is="getComponent(component)"
/>
const getComponent = (component) => {
const componentName = component.__component.split('.').pop();
return defineAsyncComponent(() => import(`../Strapi/${componentName(component)}.vue`));
};
</code>
<component
:is="getComponent(component)"
/>
const getComponent = (component) => {
const componentName = component.__component.split('.').pop();
return defineAsyncComponent(() => import(`../Strapi/${componentName(component)}.vue`));
};
I will expect the second solution to give me better performance. But thats not the case. Plus if i check the nuxt dev it looks it load all components