Nuxt•2mo ago

open umodal from parent component (pass in modelvalue to open/close it via prop?).

could you give me a basic example how to properly handle this

11 Replies

Hi @WiFi Plug. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To control a UModal from a parent component in Nuxt UI, you should use the v-model:open directive. This allows you to bind a reactive variable from the parent to the modal's open state, so you can open or close the modal by updating that variable. Here’s a basic example:

<script setup lang="ts">
const open = ref(false)
</script>

<template>
  <UButton label="Open Modal" @click="open = true" />

  <UModal v-model:open="open">
    <template #content>
      <div class="p-4">
        <p>This is the modal content.</p>
        <UButton label="Close" @click="open = false" />
      </div>
    </template>
  </UModal>
</template>

<script setup lang="ts">
const open = ref(false)
</script>

<template>
  <UButton label="Open Modal" @click="open = true" />

  <UModal v-model:open="open">
    <template #content>
      <div class="p-4">
        <p>This is the modal content.</p>
        <UButton label="Close" @click="open = false" />
      </div>
    </template>
  </UModal>
</template>

- The open ref in the parent controls the modal's visibility. - Clicking the button sets open to true, opening the modal. - The modal can be closed by setting open to false, either from inside the modal or from the parent. This is the recommended and idiomatic way to control a UModal's open state via a prop in Nuxt UI Control open state. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@679734274840330384> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

WiFi PlugOP•2mo ago

@kapa.ai what about where parent component has the open ref but a seperate component contains the modal

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- If the parent component holds the open ref but the modal is rendered in a separate (child) component, you should pass the open state and an update handler (or use v-model:open) as a prop to the child component. The child component then binds this prop to the UModal. Here’s a basic pattern: ParentComponent.vue

<script setup lang="ts">
const open = ref(false)
</script>

<template>
  <UButton label="Open Modal" @click="open = true" />
  <ChildModal v-model:open="open" />
</template>

<script setup lang="ts">
const open = ref(false)
</script>

<template>
  <UButton label="Open Modal" @click="open = true" />
  <ChildModal v-model:open="open" />
</template>

ChildModal.vue

<script setup lang="ts">
const props = defineProps({
  open: Boolean
})
const emit = defineEmits(['update:open'])
</script>

<template>
  <UModal v-model:open="props.open" @update:open="emit('update:open', $event)">
    <template #content>
      <div class="p-4">
        <p>This is the modal content.</p>
        <UButton label="Close" @click="emit('update:open', false)" />
      </div>
    </template>
  </UModal>
</template>

<script setup lang="ts">
const props = defineProps({
  open: Boolean
})
const emit = defineEmits(['update:open'])
</script>

<template>
  <UModal v-model:open="props.open" @update:open="emit('update:open', $event)">
    <template #content>
      <div class="p-4">
        <p>This is the modal content.</p>
        <UButton label="Close" @click="emit('update:open', false)" />
      </div>
    </template>
  </UModal>
</template>

This approach ensures the parent controls the open state, while the modal can still close itself by emitting the update event. This pattern is idiomatic for Nuxt UI and Vue 3, and is supported by the v-model:open directive as shown in the documentation Control open state. If you need to see a similar pattern in the official docs, the usage of v-model:open is shown for direct parent-child relationships, and the same principle applies when the modal is in a child component. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@679734274840330384> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

WiFi PlugOP•2mo ago

@kapa.ai let's say I have a umodal with a lot of content to the point where a scrollbar appears to scroll the content in the modal. at the bottom of that content is a ubutton. i want the button to be sticky to the bottom of the visible area of the modal always how can i do this could you give a basic example

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I'm sorry, but the provided knowledge sources do not explicitly mention how to make a button sticky to the bottom of the visible area of a UModal in Nuxt UI. The documentation covers usage of slots like #footer and shows how to add content after the modal's body, but it does not detail how to make the footer or a button within it sticky or fixed to the bottom of the modal viewport, especially when the modal content overflows and a scrollbar appears With footer slot. If you need this behavior, you may need to experiment with custom CSS (e.g., using position: sticky or position: fixed within the modal's slot structure), but there is no official example or guidance in the current documentation. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@679734274840330384> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

WiFi PlugOP•2mo ago

@kapa.ai umodal footer template section?

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- The UModal component in Nuxt UI provides a #footer slot that you can use to add content after the modal's body. This is typically where you would place action buttons like "Cancel" or "Submit". You can access the close function in the slot scope to programmatically close the modal from within the footer. Here’s a basic example from the documentation:

<script setup lang="ts">
const open = ref(false)
</script>

<template>
  <UModal v-model:open="open" title="Modal with footer" description="This is useful when you want a form in a Modal." :ui="{ footer: 'justify-end' }">
    <UButton label="Open" color="neutral" variant="subtle" />

    <template #body>
      <Placeholder class="h-48" />
    </template>

    <template #footer="{ close }">
      <UButton label="Cancel" color="neutral" variant="outline" @click="close" />
      <UButton label="Submit" color="neutral" />
    </template>
  </UModal>
</template>

<script setup lang="ts">
const open = ref(false)
</script>

<template>
  <UModal v-model:open="open" title="Modal with footer" description="This is useful when you want a form in a Modal." :ui="{ footer: 'justify-end' }">
    <UButton label="Open" color="neutral" variant="subtle" />

    <template #body>
      <Placeholder class="h-48" />
    </template>

    <template #footer="{ close }">
      <UButton label="Cancel" color="neutral" variant="outline" @click="close" />
      <UButton label="Submit" color="neutral" />
    </template>
  </UModal>
</template>

In this example, the #footer slot is used to render two buttons at the bottom of the modal. The close function is provided in the slot scope, allowing you to close the modal when the "Cancel" button is clicked With footer slot. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@679734274840330384> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

open umodal from parent component (pass in modelvalue to open/close it via prop?).

Did you find this page helpful?