All Components

Vue Templates

The Kendo UI for Vue wrappers support native Vue templates, through using single-file components.

The following example demonstrates the usage of a Kendo UI DropDownList for Vue with Vue template:

  1. Include and register the single-file component:

    import Template from './Template.vue'
    var itemTemplate = Vue.component(, Template)
  2. Define the template in the Template.vue file:

            <button @click="buttonClick">{{templateArgs.value}}</button>
        export default {
            name: 'template1',
            methods: {
                buttonClick: function (e) {
                    alert("Button click")
            data () {
            return {
                templateArgs: {}
  3. Define the template as a function that returns an object:

    methods: {
        itemTemplate: function (e) {
            return {
                template: itemTemplate,
                templateArgs: e
  4. Set the function to the DropDownList's template attribute:

    <kendo-dropdownlist v-model="dropdownlistValue" 

Templates and Runtime-only Build

When using templates and runtime-only build with vue-cli 3.0.0beta a vue.config.js file should be created in the project's root and the following content should be added to the file:

<pre><code class="language-js-no-run">module.exports = {
    configureWebpack: {
        resolve: {
            alias: {
                &#39;vue$&#39;: &#39;vue/dist/vue.esm.js&#39;
In this article