The Window is usually opened as a result of a user action and, basically, can be initialized as a non-visible component and then opened when it is needed.

It is recommended to center the Window rather than open it near the HTML element that is used to define its content. If the Window content is loaded with AJAX, the centering of its position occurs after the request completes. For more information on how to handle the positioning and opening, refer to the API reference of the Window.

<div id="vueapp" class="vue-app">
    <kendo-window ref="windowRef"
                  :title="'Window title'"
        <h4>Window content</h4>

    <span class="k-button" @click="onClick">Click here to open the window</span>

new Vue({
    el: '#vueapp',
    methods: {
        onClick (e) {
            var window = this.$refs.windowRef.kendoWidget();

In this article