Predefined Dialog

Depending on the type of the dialogs your project renders, you can predefine the Dialog as alert, prompt, or confirm.

The following example demonstrates how to configure the Dialog types by using the Dialog API methods.

<div id="vueapp" class="vue-app">
    <button class="k-button" @click="alert">kendo.alert</button>
    <button class="k-button" @click="confirm">kendo.confirm</button>
    <button class="k-button" @click="prompt">kendo.prompt</button>
new Vue({
    el: '#vueapp',
    methods: {
      alert () {
        kendo.alert("This is a Kendo UI Alert message.");
        confirm () {
        kendo.confirm("Are you sure that you want to proceed?").then(function () {
                    kendo.alert("You chose the Ok action.");
            }, function () {
                    kendo.alert("You chose to Cancel action.");
        prompt () {
        kendo.prompt("Please, enter a arbitrary value:", "any value").then(function (data) {
                    kendo.alert(kendo.format("The value that you entered is '{0}'", data));
            }, function () {
                    kendo.alert("Cancel entering value.");

In this article