Error rendering component with <component :is="" />

[pedrodruviaro]

I am unable to render the modal component correctly. In the payload of the handleModalToggle function, I am receiving the correct value "ModalLogin," but the component does not render based on it. The composition API without setup is being used in the coutrse example, and everything works. The issue arises only when using setup.

<template>
  <Teleport to="body">
    <div
      v-if="state.isActive"
      class="fixed top-0 left-0 z-50 flex items-center justify-center w-full h-full bg-black bg-opacity-50"
      @click="handleModalToggle({ status: false })"
    >
      <div class="fixed mx-10" :class="state.width">
        <div
          class="flex flex-col overflow-hidden bg-white rounded-lg animate__animated animate__fadeInDown animate__faster"
        >
          <div class="flex flex-col px-12 py-10 bg-white">
            <component :is="state.component"></component>
          </div>
        </div>
      </div>
    </div>
  </Teleport>
</template>

<script setup>
import { reactive, onMounted, onBeforeUnmount, defineAsyncComponent } from 'vue'
import useModal from '@/hooks/useModal'

// eslint-disable-next-line no-unused-vars
const ModalLogin = defineAsyncComponent(() => import('@/components/ModalLogin/index.vue'))

const DEFAULT_WIDTH = 'w-3/4 lg:w-1/3'
const modal = useModal()

const state = reactive({
  isActive: false,
  component: null,
  props: {},
  width: DEFAULT_WIDTH
})

onMounted(() => {
  modal.listen(handleModalToggle)
})

onBeforeUnmount(() => {
  modal.off(handleModalToggle)
})

function handleModalToggle(payload) {
  console.log(payload)
  if (payload.status) {
    state.component = payload.component
    state.props = payload.props
    state.width = payload.width ?? DEFAULT_WIDTH
  } else {
    state.component = {}
    state.props = {}
    state.width = DEFAULT_WIDTH
  }

  state.isActive = payload.status
}
</script>

[LinusBorg]

I assume you receive a string 'ModalToggle'?

What you meed is an actual reference to the component object, though.

Since there is no component registration in script setup> (like there is with defineComponent()), Vue can't determine what that string should be mapped to.

So you need to provide that yourself

const components = {
  ModalToggle: ModalToggle
}

<component :is="components[state.component]">

[pedrodruviaro]

Thank you, this way it worked.
Before taking a break for the weekend, I managed to make it work by importing the component within the function. Whether it would be performant or not, I can't say. For example:

function handleModalToggle(payload) {
  if (payload.status) {
    const resolvedComponent = defineAsyncComponent(
      () => import(`@/components/${payload.component}/index.vue`)
    )
    state.component = markRaw(resolvedComponent)
    state.props = payload.props
    state.width = payload.width ?? DEFAULT_WIDTH
  } else {
    state.component = null // Set it to null or an empty object, depending on your requirements
    state.props = {}
    state.width = DEFAULT_WIDTH
  }

  state.isActive = payload.status
}