You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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>
<divclass="newsletter-form">
<h2class="text-xl font-semibold mb-4">Sign up for our newsletter</h2>
<UForm :schema="schema" @submit="onSubmit"> // <== this part is no longer rendered
<UFormGrouplabel="Email"name="email">
<UInputv-model="state.email" />
</UFormGroup>
<UButtontype="submit"color="primary"class="mt-4">
Subscribe
</UButton>
</UForm>
</div>
</template>
<scriptsetup>conststate=reactive({ email:''});constschema= { email: { type:'string', required:true, email:true }};constonSubmit= (event) => {// Handle form submissionconsole.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!
The text was updated successfully, but these errors were encountered:
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)
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 ofresolveComponent
, when I want a component to be rendered inside theUModal
, otherwise there are warning about reactivity in the console. But as soon as I usemarkRaw
, the input field of the e.g. Newsletter form is no longer rendered.This is the Newsletter component:
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!
The text was updated successfully, but these errors were encountered: