[Vuejs]-Render dynamic components in Vue3

by

0👍

✅

In Vue 3 with script setup <component :is /> needs a reference to the component definition instead of a component name as a string.

Try this:

<script setup>
// ...
const componentMap = {
  ComponentWebComponentsImage: defineAsyncComponent(() =>
    import('../components/Hero1.vue'),
  ),
  ComponentWebComponentsImage: defineAsyncComponent(() =>
    import('../components/Hero2.vue'),
  ),
  ComponentWebComponentsImageText = defineAsyncComponent(() =>
    import('../components/Hero3.vue'),
  )
}
</script>

<template>
  <div v-for="item in result.home.data.attributes.webcomponents" :key="item.id">
    <component :is="componentMap[item.__typename]" />
  </div>
</template>

Leave a comment