Dynamic Dialog

Dialogs can be created dynamically with any component as the content using a DialogService.

Import #


import DynamicDialog from 'primevue/dynamicdialog';

Dialog Service #

Dynamic dialogs are controlled via the DialogService that needs to be installed as an application plugin.



import {createApp} from 'vue';
import DialogService from 'primevue/dialogservice';

const app = createApp(App);
app.use(DialogService);

$dialog is available as a property in the application instance for Options API. The service can be injected with the useDialog function for Composition API.



import { useDialog } from 'primevue/usedialog';

const dialog = useDialog();

Usage #

Dialogs can be created dynamically with any component as the content using a DialogService along with a DynamicDialog component. Ideal location of a DynamicDialog is the main template so that it can be used by any component within the application.



<Button label="Select a Product" icon="pi pi-search" @click="showProducts" />

<DynamicDialog />

Open #

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, {});
        }
    }
}

Close #

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();
        }
    }
}

Passing Data #

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});
        }
    }
}

Emits #

The emits object can be used to handle events emitted by the child component. Each method name used in this object must begin with 'on'. Then the emit name should come. This is an event handling rule of Vue.



this.$dialog.open(ProductListDemo, {
    emits: {
        onInfo: (e) => {     // The 'on' prefix and same emit name are required.
            console.log(e);  // {user: 'primetime'}
        }
    },
};



// ProductListDemo
<template>
    <Button label="Submit" @click="showInfo" />
</template>

<script>
export default {
    emits: ['info'],
    methods: {
        showInfo() {
            this.$emit('info', { user: 'primetime' });
        }
    }
};
</script>

Customization #

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



import { markRaw } from 'vue';
import ProductListDemo from './ProductListDemo';
import FooterDemo from './FooterDemo';

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: markRaw(FooterDemo)
                },
                onClose: (options) => {
                    const data = options.data;
                    if (data) {
                        this.$toast.add({ severity:'info', summary: 'Info Message', detail:'Order submitted', life: 3000 });
                    }
                }
            });
        }
    }
}

Accessibility #