The useDialogPluginComponent composable is part of Quasar Dialog Plugin (Invoking custom component). If you haven’t dug into it by now, please have a first read there.
This composable is to be used on the custom components which a Dialog plugin is invoked with. It will bootstrap all the necessary communication of the component with the plugin.
Starting with Quasar v2.28, the composable also reports the dismissal reason: the hide event that it emits (and which the plugin forwards to the onCancel/onDismiss chained callbacks) carries 'cancel' (closed through onDialogCancel), 'backdrop' (a click/tap outside, including through QDialog’s auto-close), 'escape' (the ESC key) or 'programmatic' (hidden through code, which includes an app route change).
For the reason to be derived correctly, keep @hide="onDialogHide" bound directly (so onDialogHide receives QDialog’s event; a wrapper like @hide="onDialogHide()" would drop it) and settle a Cancel action through onDialogCancel rather than hide().
Syntax
<script setup>
import { useDialogPluginComponent } from 'quasar'
const { dialogRef, onDialogHide, onDialogOK, onDialogCancel } =
useDialogPluginComponent()
// dialogRef - Vue ref to be applied to QDialog
// onDialogHide - Function to be used as handler for @hide on QDialog;
// bind it directly (no wrapping) so it receives QDialog's
// event and can forward the dismissal reason to the
// chained onCancel/onDismiss callbacks (Quasar v2.28+)
// onDialogOK - Function to call to settle dialog with "ok" outcome
// example: onDialogOK() - no payload
// example: onDialogOK({ /*...*/ }) - with payload
// onDialogCancel - Function to call to settle dialog with "cancel" outcome
</script>Full example
<template>
<!-- notice dialogRef here -->
<q-dialog ref="dialogRef" @hide="onDialogHide">
<q-card class="q-dialog-plugin">
<!--
...content
... use q-card-section for it?
-->
<!-- buttons example -->
<q-card-actions align="right">
<q-btn color="primary" label="OK" @click="onOKClick" />
<q-btn color="primary" label="Cancel" @click="onCancelClick" />
</q-card-actions>
</q-card>
</q-dialog>
</template>
<script setup>
import { useDialogPluginComponent } from 'quasar'
const props = defineProps({
// ...your custom props
})
defineEmits([
// REQUIRED; need to specify some events that your
// component will emit through useDialogPluginComponent()
...useDialogPluginComponent.emits
])
// REQUIRED; must be called inside of setup()
const { dialogRef, onDialogHide, onDialogOK, onDialogCancel } =
useDialogPluginComponent()
// dialogRef - Vue ref to be applied to QDialog
// onDialogHide - Function to be used as handler for @hide on QDialog;
// bind it directly (no wrapping) so it receives QDialog's
// event and can forward the dismissal reason to the
// chained onCancel/onDismiss callbacks (Quasar v2.28+)
// onDialogOK - Function to call to settle dialog with "ok" outcome
// example: onDialogOK() - no payload
// example: onDialogOK({ /*...*/ }) - with payload
// onDialogCancel - Function to call to settle dialog with "cancel" outcome
// other methods that we used in our vue html template;
// these are part of our example (so not required)
function onOKClick() {
// on OK, it is REQUIRED to
// call onDialogOK (with optional payload)
onDialogOK()
// or with payload: onDialogOK({ ... })
// ...and it will also hide the dialog automatically
}
// we can passthrough onDialogCancel directly
function onCancelClick() {
onDialogCancel()
}
</script>