You’re currently viewing documentation for our jQuery wrappers.This product reached EOL in May, 2024. To ensure smoother transition we provide support till May, 2025. Check here details and migration guidelines.

Dialog Overview

The Dialog communicates specific information and prompts users to take specific actions by interacting with a modal dialog.

The Dialog wrapper for Vue is a client-side wrapper for the Kendo UI Dialog widget.

The Dialog Package is part of Kendo UI for Vue, a professional grade UI library with 100+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

Basic Usage

The following example demonstrates how to initialize the Dialog.

View Source
Change Theme:


To initialize the Dialog, either:

Initializing with Webpack

  1. Install Kendo UI and add a theme.

    npm install --save @progress/kendo-ui
    npm install --save @progress/kendo-theme-default
  2. Install the Kendo UI Dialog package for Vue.

    npm install --save @progress/kendo-dialog-vue-wrapper
  3. Import the Kendo UI packages to the App component. If you use the Kendo UI components more than once in your application, add all Kendo UI-related files to the main.js file. If you use the Kendo UI components once in your application, add the Kendo UI-related files the component where they will be referred.

    import '@progress/kendo-ui' // This will import the entire Kendo UI library
    // As an alternative, you could import only the scripts that are used by a specific widget:
    // import '@progress/kendo-ui/js/kendo.dialog' // Imports only the Dialog script and its dependencies
    import '@progress/kendo-theme-default/dist/all.css'
    import { Dialog } from '@progress/kendo-dialog-vue-wrapper'
    import { DialogInstaller } from '@progress/kendo-dialog-vue-wrapper'
    new Vue({
    	el: '#app',
    	components: {

Functionality and Features


The following example demonstrates basic Dialog events. You can subscribe to all events of the Dialog by the handler name.

<div id="vueapp" class="vue-app">
    <kendo-dialog v-on:close="onClose"
				  :title="'Hello Dialog'"
				  :content="'This is dialog content'">
		<kendo-dialog-action :text="'OK'"></kendo-dialog-action>
		<kendo-dialog-action :text="'Cancel'"

new Vue({
	el: '#vueapp',
	methods: {
	  onClose () {
	    console.log("Dialog is about to be closed.");
	  onOpen () {
	    console.log("Dialog is about to be opened.");