By default, the Dialog is visible.

To control its visibility, use a v-if and a variable based on which the Dialog will be shown or hidden.

<k-dialog v-if="visible"/>

The following example demonstrates how to show and hide the Dialog based on its state.

<div id="vueapp" class="vue-app">
                  <span v-if="!visibleDialog">
                      <button class="k-button" @click="toggleDialog">Open Dialog</button>
              <k-dialog v-if="visibleDialog" :title="'Please confirm'" @close="toggleDialog">
                  <p :style="{ margin: '25px', textAlign: 'center' }">Are you sure you want to continue?</p>
                      <button class="k-button" @click='toggleDialog'>No</button>
                      <button class="k-button" @click='toggleDialog'>Yes</button>
import { Dialog, DialogActionsBar } from '@progress/kendo-vue-dialogs';
Vue.component('k-dialog', Dialog);
Vue.component('dialog-actions-bar', DialogActionsBar);

new Vue({
    el: '#vueapp',
    data: function () {
        return {
            visibleDialog: false
    methods: {
      toggleDialog() {
          this.visibleDialog = !this.visibleDialog;

In this article