Version:

Install ​

shell
npm i @mate/vue-dialog

Import ​

javascript
import '@vaadin/dialog';

Variants ​

Small ​

html
<vaadin-dialog header-title="Small dialog" theme="small"></vaadin-dialog>
javascript
document.querySelector('vaadin-dialog').renderer = (root, dialog, model) => root.innerHtml = `<p>Content</p>`;
document.querySelector('vaadin-dialog').opened = true;

Medium ​

html
<vaadin-dialog header-title="Medium dialog" theme="medium"></vaadin-dialog>
javascript
document.querySelector('vaadin-dialog').renderer = (root, dialog, model) => root.innerHtml = `<p>Content</p>`;
document.querySelector('vaadin-dialog').opened = true;

Large ​

html
<vaadin-dialog header-title="Large dialog" theme="large"></vaadin-dialog>
javascript
document.querySelector('vaadin-dialog').renderer = (root, dialog, model) => root.innerHtml = `<p>Content</p>`;
document.querySelector('vaadin-dialog').opened = true;
html
<vaadin-dialog header-title="Datensätze löschen?"></vaadin-dialog>
javascript
document.querySelector('vaadin-dialog').renderer = (root, dialog, model) => root.innerHtml = `<p>Diese Aktion kann nicht rückgängig gemacht werden.</p>`;
document.querySelector('vaadin-dialog').footerRenderer = (root, dialog, model) => root.innerHtml = `<vaadin-button>
    <vaadin-button>Abbrechen</vaadin-button>
    <vaadin-button theme="error primary">Löschen</vaadin-button>`;
document.querySelector('vaadin-dialog').opened = true;