Dynamic dialogs require the DialogService to be configured globally.
import {createApp} from 'vue';
import DialogService from 'primevue/dialogservice';
const app = createApp(App);
app.use(DialogService);
import DynamicDialog from 'primevue/dynamicdialog';
<script src="https://unpkg.com/primevue@^3/core/core.min.js"></script>
<script src="https://unpkg.com/primevue@^3/dynamicdialog/dynamicdialog.min.js"></script>
Ideal location of a DynamicDialog is the main application template so that it can be used by any component within the application.
<template>
<DynamicDialog />
<template>
$dialog is available as a property in the application instance.
const dialogRef = this.$dialog;
The service can be injected with the useDialog function.
import { useDialog } from 'primevue/usedialog';
const dialog = useDialog();
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.
import ProductListDemo from './ProductListDemo';
export default {
methods:{
showProducts() {
this.$dialog.open(ProductListDemo, {});
}
}
}
import ProductListDemo from './ProductListDemo';
import { useDialog } from 'primevue/usedialog';
export default {
methods:{
showProducts() {
const dialog = useDialog();
dialog.open(ProductListDemo, {});
}
}
}
The close function of the dialogRef is used to hide a Dialog. The dialogRef is injected to the component that is loaded by the dialog.
export default {
inject: ['dialogRef'],
methods:{
closeDialog() {
this.dialogRef.close();
}
}
}
import { inject } from 'vue'
export default {
methods:{
closeDialog() {
const dialogRef = inject('dialogRef');
dialogRef.value.close();
}
}
}
Data can be passed to the component that is loaded by the Dialog and also from the component back to the caller component. Use the open function and pass your parameters with the data property in the options object.
this.$dialog.open(ProductListDemo, {
data: {
user: 'primetime'
}
};
export default {
inject: ['dialogRef'],
mounted:{
const params = this.dialogRef.data; //{user: 'primetime'}
}
}
Similarly when hiding a Dialog, any parameter passed to the close function is received from the onClose callback defined by the open function at the caller.
this.$dialog.open(ProductListDemo, {
onClose(options) {
const callbackParams = options.data; //{id: 12}
}
);
export default {
inject: ['dialogRef'],
methods:{
closeDialog() {
this.dialogRef.close({id: 12});
}
}
}
props option is used to customize the dynamically generated Dialog, refer to the
import { h } from 'vue';
import Button from 'primevue/button';
import ProductListDemo from './ProductListDemo';
export default {
methods:{
showProducts() {
const dialogRef = this.$dialog.open(ProductListDemo, {
props: {
header: 'Product List',
style: {
width: '50vw',
},
breakpoints:{
'960px': '75vw',
'640px': '90vw'
},
modal: true
},
templates: {
footer: () => {
return [
h(Button, { label: "No", icon: "pi pi-times", onClick: () => dialogRef.close(), class: "p-button-text" }),
h(Button, { label: "Yes", icon: "pi pi-check", onClick: () => dialogRef.close(), autofocus: true})
]
}
},
onClose: (options) => {
const data = options.data;
if (data) {
this.$toast.add({ severity:'info', summary: 'Info Message', detail:'Order submitted', life: 3000 });
}
}
});
}
}
}
DialogService is the main entry point to open a dialog and load any content within.
| Name | Parameters | Description |
|---|---|---|
| open |
content: The component to load options: Configuration of the Dialog |
Creates a dialog dynamically with the given options and loads the component. See the Dialog Open Configuration API section below for the avaiable properties. |
Options to configure a dynamically loaded Dialog including Dialog props, data to pass and callback to execute on hide.
| Name | Type | Default | Description |
|---|---|---|---|
| props | object | null | Properties of a dialog. |
| data | object | null | Data to pass to the loaded component. |
| templates | object | null | Templates of a dialog including, header and footer. |
| onClose | function | null | Function callback to invoke when dialog is closed. |
Reference to the dynamic dialog that can be used to access the passed data and close the dialog with the option of passing data back to the caller.
| Name | Type | Default | Description |
|---|---|---|---|
| content | object | null | Loaded content of a dialog. |
| options | object | null | Options used to open a dialog. |
| data | object | null | Data passed to the dialog. |
| close | function | null | Function to close a dialog. |
DynamicDialog uses the Dialog component internally, visit
None.