DEV Community

loading...
Cover image for Vue3 Dialog

Vue3 Dialog

primetek profile image PrimeTek ・2 min read

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';
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode
export default {
    data() {
        return {
            display: false
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode
<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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Popup Content inside the 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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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.

Discussion (0)

pic
Editor guide