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.name, Template)
  2. Define the template in the Template.vue file:

    <template>
        <span>
            <button @click="buttonClick">{{templateArgs.value}}</button>
            {{templateArgs.text}}
        </span>
    </template>
    
    <script>
        export default {
            name: 'template1',
            methods: {
                buttonClick: function (e) {
                    alert("Button click")
                }
        },
            data () {
            return {
                templateArgs: {}
                }
        }
        }
    </script>
  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" 
                        :template="itemTemplate"
                        :data-source="dataSourceArray"
                        :data-text-field="'text'"
                        :data-value-field="'value'"
                        :filter="'contains'">
    </kendo-dropdownlist>

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;
            }
        }
    }
}</code></pre>
In this article