A single shared dialog instance is required in the application, ideal location would be defining it once at the main application template.

A dynamic dialog is controlled via the DialogService that needs to be installed as an application plugin.

The service is available with the useDialog function for Composition API or using the $dialog property of the application for Options API.

The open function of the DialogService is used to open a Dialog. First parameter is the component to load and second one is the configuration object to customize the Dialog.

The component can also be loaded asynchronously, this approach is useful in conditional cases and to improve initial load times as well.

DynamicDialog uses the Dialog component internally, visit dialog for more information about the available props.

Use the data property to pass parameters when opening a Dialog, the internal component can later access this data using dialogRef.

Similarly when hiding a Dialog, any parameter passed to the close function is received from the onClose callback.

Most of the time, the requirement is returning a value from the dialog. The close function of the dialogRef is used for this purpose where the parameter passed will be available through the onClose callback at the caller. The dialogRef is injected to the component loaded by the dialog.

The emits object defines callbacks to handle events emitted by the component within the Dialog.

A sample implementation to demonstrate loading components asynchronously, nested content and passing data.

Visit accessibility section of dialog component for more information.