Kendo Vue Window Content template from component

[Cristiano]

 Hello,

I'm building a general modal component using the Window. Is it possible to pass a Vue component as template for a kendo Window?

Thanks!

 

[Dimitar]

Hello Cristiano,

On the following CodeSandbox example you can find a simple Window implementation, where a Vue component is used to populate the Window content with data. 

To achieve the desired result, you can define a Vue component(ContentTemplate.vue):

<template>
    <span>
        <button>Get Title</button>
        {{ text }}
    </span>
</template>

<script>
export default {
  name: "template1",
  props: {
    text: String
  }
};
</script>

Then register it in the main.js:

import Template from "./components/ContentTemplate.vue";
Vue.component("my-template", Template);

And finally use this new component withing the Window:

<kendo-window ref="wnd"
     :width="'300px'"
    :title="'Window title'"
    :visible="visible"
     style="display:none">
  <my-template :text="content"></my-template>
</kendo-window>

Regards,
Dimitar
Progress Telerik

[Cristiano]

Thanks, @Dimitar!