ui/docs/content/2.composables/use-modal.md

title, description

title	description
useModal	A composable to programmatically control a Modal component.

Usage

Use the auto-imported useModal composable to programmatically control a Modal component.

<script setup lang="ts">
const modal = useModal()
</script>

• The useModal composable is created using createSharedComposable, ensuring that the same modal state is shared across your entire application.

::tip{to="/components/modal"} Learn how to customize the appearance and behavior of modals in the Modal component documentation. ::

API

open(component: Component, props?: ModalProps & ComponentProps<T>)

Opens a modal with the specified component and props.

• Parameters:
  • component: The Vue component to render inside the modal.
  • props: An optional object of props to pass to both the Modal and the rendered component.

<script setup lang="ts">
const modal = useModal()

function openModal() {
  modal.open(MyModalContent, { title: 'Welcome' })
}
</script>

close()

Closes the currently open modal.

<script setup lang="ts">
const modal = useModal()

async function closeModal() {
  await modal.close()
}
</script>

reset()

Resets the modal state to its default values.

<script setup lang="ts">
const modal = useModal()

function resetModal() {
  modal.reset()
}
</script>

patch(props: Partial<ModalProps & ComponentProps<T>>)

Updates the props of the currently open modal.

<script setup lang="ts">
const modal = useModal()

function updateModalTitle() {
  modal.patch({ title: 'Updated Title' })
}
</script>

Example

Here's a complete example of how to use the useModal composable:

<template>
  <div>
    <button @click="openModal">Open Modal</button>
    <button @click="closeModal">Close Modal</button>
    <button @click="updateModalTitle">Update Title</button>
  </div>
</template>

<script setup lang="ts">
const modal = useModal()

const openModal = () => {
  modal.open(MyModalContent, { title: 'Welcome' })
}

const closeModal = async () => {
  await modal.close()
}

const updateModalTitle = () => {
  modal.patch({ title: 'Updated Welcome' })
}
</script>

In this example, we're using the useModal composable to control a modal. We can open it with a specific component and props, close it, and update its props.