How to render a component in a UModal?

[rowild]

Description

In this example https://stackblitz.com/edit/nuxt-starter-d1zs6g?file=app.vue

I try to implement UModal. I would like to render different components in that UModal, e.g. a Newsletter Form or a Three.js viewer.

It turns out that I must use markRaw isntead of resolveComponent, when I want a component to be rendered inside the UModal, otherwise there are warning about reactivity in the console. But as soon as I use markRaw, the input field of the e.g. Newsletter form is no longer rendered.

This is the Newsletter component:

<template>
  <div class="newsletter-form">
    <h2 class="text-xl font-semibold mb-4">Sign up for our newsletter</h2>
    <UForm :schema="schema" @submit="onSubmit">   // <== this part is no longer rendered
      <UFormGroup label="Email" name="email">
        <UInput v-model="state.email" />
      </UFormGroup>
      <UButton type="submit" color="primary" class="mt-4">
        Subscribe
      </UButton>
    </UForm>
  </div>
</template>

<script setup>
const state = reactive({
  email: ''
});

const schema = {
  email: {
    type: 'string',
    required: true,
    email: true
  }
};

const onSubmit = (event) => {
  // Handle form submission
  console.log('Form submitted:', event.data);
};
</script>

Another component, the PointCloud.vue component, is not loaded at all, as it seems.

I am new to Nuxt and NuxtUi, so there still a lot to learn, but in this case I am stuck and would hope for your help!

[rowild]

EDIT: When importing the Newsletter with import Newsletter from '~/components/Newsletter.vue'; and changing call to the modal by removing any quotes (markRaw("Newsletter"); => markRaw(Newsletter);), the input field of the form suddenly works... (or is at least displayed)

[benjamincanac]

It might be easier to achieve what you want using the useModal composable: https://ui.nuxt.com/components/modal#control-programmatically

[github-actions[bot]]

This issue is stale because it has been open for 30 days with no activity.