Vue3 Dialog

Vue3 Dialog is a container to display content in an overlay window. It supports Vue 3 with PrimeVue 3 and Vue 2 with PrimeVue 2.

Setup

Refer to PrimeVue setup documentation for download and installation steps for your environment such as Vue CLI, Vite or browser.

Import

import Dialog from 'primevue/dialog';

Getting Started

Dialog is used as a container and visibility is managed with visible property that requires the v-model for two-way binding.

<Dialog header="Header" v-model:visible="display" >
    Content
</Dialog>

export default {
    data() {
        return {
            display: false
        }
    }
}

Header and Footer

Header and Footer sections are defined using properties with the same name that accept simple strings or with the header and footer templates for custom content.

<Dialog header="Header" footer="Footer" v-model:visible="display">
    Content
</Dialog>

<Dialog v-model:visible="display">
    <template #header>
        <h3>Header</h3>
    </template>

    Content

    <template #footer>
        <Button label="No" icon="pi pi-times" class="p-button-text"/>
        <Button label="Yes" icon="pi pi-check" autofocus />
    </template>
</Dialog>

Positioning

Dialog location is controlled with the position property whose default value is center. Other valid values are top", "bottom", "left", "right", "topleft", "topright", "bottomleft" and "bottomright".

<Dialog position="top" v-model:visible="display">
    Content
</Dialog>

If the dialog contains components with popup elements such as Dropdown or Calendar, set contentStyle to overflow:visible so that overlays can be displayed outside of the content area.

<Dialog v-model:visible="display" :contentStyle="{overflow: 'visible'}">
    Content
</Dialog>

Initial Focus

Adding autofocus to an element in the dialog makes it the initial focus target when dialog gets shown.

<Dialog v-model:visible="display">
    Content
    <template #footer>
        <Button label="No" />
        <Button label="Yes" autofocus/>
    </template>
</Dialog>

Theming

Dialog supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the Designer tool.

Resources

Visit the PrimeVue Dialog showcase for demos and documentation.