Using Popup Composable

This guide shows you how to use the usePopup composable to display modal dialogs, confirmation dialogs, and custom popups in your Vue 3 projects.

Overview

The usePopup composable provides a programmatic way to control modal dialogs. It supports:

• Confirmation dialogs
• Alert dialogs
• Custom component popups
• Full control over popup behavior

Setup

First, add the Popup component to your app root (App.vue or Provider.vue). Import OPopup component and add it to your template.

Basic Usage

Confirmation Dialog

Use popup.confirm() to show confirmation dialogs. Provide title, content, and callback options for onConfirm and onCancel.

Alert Dialog

Use popup.alert() to show alert dialogs. Provide title, content, and an onOk callback option.

Advanced Usage

Custom Popup with Component

Use popup.custom() to display custom Vue components inside a popup. Pass the component reference, props, and popup options.

Full Control with showPopup

Use popup.showPopup() for complete control over popup configuration including custom buttons, close handlers, and component props.

Available Methods

Method	Parameters	Description
popup.confirm(title, content, options?)	title: string, content: string, options?: object	Show confirmation dialog
popup.alert(title, content, options?)	title: string, content: string, options?: object	Show alert dialog
popup.custom(component, props, options?)	component: Component, props: object, options?: object	Show custom component in popup
popup.showPopup(options)	options: object	Show popup with full control
popup.closePopup(reason?)	reason?: string	Close current popup

Options Object

confirm/alert Options

• onConfirm - Called when user confirms
• onCancel - Called when user cancels (confirm only)
• onOk - Called when user clicks OK (alert only)
• buttonConfig - Custom button configuration
• showCloseIcon - Show close icon
• closeOnOverlayClick - Close on overlay click

showPopup Options

• title - Popup title
• content - Text content
• component - Custom component
• componentProps - Props for custom component
• buttonConfig - Button configuration
• showCloseIcon - Show close icon
• closeOnOverlayClick - Close on overlay click
• showMandatoryFieldsError - Show validation error
• showMandatoryFieldsErrorMsg - Error message
• customClass - Custom CSS class
• onClose - Called when popup closes
• onFooterClick - Called on footer click

Use Cases

1. Delete Confirmation

• Confirm before deleting user accounts
• Confirm before removing items from lists
• Confirm before clearing data

2. Form Dialogs

• Edit user profile in a popup
• Create new item with form validation
• Bulk edit multiple items

3. Information Alerts

• Show important system messages
• Display terms and conditions
• Show help or tutorial information

4. Custom Component Popups

• Complex forms with multiple steps
• File upload dialogs
• Settings configuration panels

5. Action Confirmations

• Confirm before publishing content
• Confirm before making payments
• Confirm before exporting data

Best Practices

1. Use confirm for destructive actions - Always confirm before deleting or modifying critical data
2. Use alert for informational messages - Simple success or info messages
3. Use custom for complex forms - When you need form validation or complex UI
4. Handle async operations - Show loading states during API calls
5. Close popups programmatically - Always close after successful operations
6. Provide clear messages - Make sure users understand what they're confirming

---

📖 Related Documentation:

• Popup Component API →