You’re currently viewing documentation for our jQuery wrappers.We highly recommend that you migrate to the equivalent Native Vue component as that is what will receive updates in the future.

Vue Templates

The Kendo UI for Vue wrappers support both the native Vue templates (through using single-file components) and the standard Kendo UI templates.

• The Kendo UI for Vue components require the usage of the full Vue build that features both the runtime and the compiler.
• When you use the runtime-only build with Vue CLI, create a vue-config.js file in the root of your project and set the runtimeCompiler option to true.
• The Vue router-link component could not be used in Vue templates when those are part of a Kendo UI for Vue component definition.

Using Single-File Components

The following steps demonstrate how to use a Kendo UI DropDownList with a Vue template. For the full implementation of the approach, refer to this CodeSandbox example.

1. Define the item template as a vue file (ItemTemplate.vue).

   Copy Code<template>
       <span>
           <button @click="buttonClick">{{templateArgs.value}}</button>
           {{templateArgs.title}}
       </span>
   </template>

   Copy Code<script>
       export default {
           name: 'template1',
           methods: {
               buttonClick: function (e) {
                   alert("Button click")
               }
           },
           data () {
               return {
                   templateArgs: {}
               }
           }
       }
   </script>

2. Set the template of the DropDownList as a function.

   Copy Code<template>
       <div id="container">
           <kendo-dropdownlist ref="ddl"
                               :data-source="localDataSource"
                               :data-text-field="'title'"
                               :data-value-field="'id'"
                               :filter="'contains'"
                               :template="itemTemplate">
           </kendo-dropdownlist>
       </div>
   </template>

3. Include and register the single-file component in the view where the DropDownList initialization is located. Then, define the template as a method that returns the component and pass any required metadata in the template arguments.

   Native Vue templates are compiled at runtime. Thus, the parent scope is not automatically passed to child components. To work around this limitation, pass any required metadata in the template arguments as demonstrated in the following code snippet.

   Copy Code<script>
   import Template from "./ItemTemplate.vue";
   import Vue from "vue";
   
   export default {
       name: "HelloWorld",
       data() {
           return {
               localDataSource: {
                   data: [
                       { title: "title 1", num: 1, numTwo: 2, total: 3, id: 1 },
                       { title: "title 2", num: 1, numTwo: 2, total: 3, id: 2 }
                   ]
               }
           };
       },
       methods: {
           itemTemplate: function(e) {
               return {
                   template: Vue.component(Template.name, Template),
                   templateArgs: Object.assign({}, e, {
                       parentComponent: this.$refs.ddl
                   })
               };
           }
       }
   };
   </script>

Using Standard Kendo UI Templates

The following steps demonstrate how to use a Kendo UI DropDownList with a Kendo UI template. For the full implementation of the approach, refer to this CodeSandbox example.

1. Set the template of the DropDownList as a function and define the script that holds its content.

   Copy Code<template>
       <div id="container">
           <kendo-dropdownlist ref="ddl"
                               :data-source="localDataSource"
                               :data-text-field="'title'"
                               :data-value-field="'id'"
                               :filter="'contains'"
                               :template="itemTemplate">
           </kendo-dropdownlist>
   
           <script id="itemTemplate" type="text/x-kendo-template">
               <div>
                   #= data.id #
               </div>
           </script>
       </div>
   </template>

2. Define the template as a method that returns the compiled script.

   Copy Codemethods: {
       itemTemplate: function (e) {
           var template = kendo.template(kendo.jQuery('#itemTemplate').html())
           return template(e)
       }
   }

Suggested Links

• Official Vue Loader Documentation
• Official Vue Single-File Components Documentation
• Getting Started with Kendo UI for Vue