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.

TypeScript Integration

The Vue framework allows developers to use the TypeScript superset to develop their applications.

To use the Kendo UI components for Vue with TypeScript:

1. Install Vue CLI.

   Copy Codenpm install --global @vue/cli

2. If you have already installed the Vue CLI, make sure it is version 3.0 or later.

   Copy Codevue --version

3. Navigate to the desired folder and create the new Vue project in it.

   Copy Codevue create kendo-vue-in-typescript

4. Select the Manually select features option.

   

5. Select TypeScript to include it in the application.

   

6. Answer to each of the next configuration options as per your needs. Finally, you will have an application with a tsconfig.json file with similar contents as demonstrated below.

   Copy Code{
       "compilerOptions": {
           "target": "esnext",
           "module": "esnext",
           "strict": true,
           "jsx": "preserve",
           "importHelpers": true,
           "moduleResolution": "node",
           "experimentalDecorators": true,
           "esModuleInterop": true,
           "allowSyntheticDefaultImports": true,
           "sourceMap": true,
           "baseUrl": ".",
           "types": [
               "webpack-env",
               "mocha",
               "chai"
           ],
           "paths": {
           "@/*": [
               "src/*"
           ]
           },
           "lib": [
               "esnext",
               "dom",
               "dom.iterable",
               "scripthost"
           ]
       },
       "include": [
           "src/**/*.ts",
           "src/**/*.tsx",
           "src/**/*.vue",
           "tests/**/*.ts",
           "tests/**/*.tsx"
       ],
       "exclude": [
           "node_modules"
       ]
   }

7. Navigate inside the project folder and install Kendo UI and the desired Kendo UI theme.

   Copy Codenpm install -s @progress/kendo-ui
   npm install - s @progress/kendo-theme-default

8. Install the Kendo UI packages for Vue that will be required by the specific project scenario. The following example uses the kendo-dropdowns-vue-wrapper package.

   Copy Codenpm install - s @progress/kendo-dropdowns-vue-wrapper

9. In the main.ts file, import the Kendo UI, the Kendo UI theme, and the DropdownsInstaller from kendo-dropdowns-vue-wrapper.

   Copy Codeimport '@progress/kendo-ui';
   import '@progress/kendo-theme-default';
   import { DropdownsInstaller } from '@progress/kendo-dropdowns-vue-wrapper'

10. Include the DropdownsInstaller that will be used by Vue.

    Copy CodeVue.use(DropdownsInstaller);

11. In the HelloWorld.vue component, change its template content to include a Kendo UI DropDownList for Vue.

    Copy Code<template>
    <div class="hello">
        <p>DropDownList</p>
        <kendo-dropdownlist ref="dropDownList"
                            :data-source="dataSourceArray"
                            :data-text-field="'text'"
                            :data-value-field="'value'"
                            :index="0">
        </kendo-dropdownlist>
    </div>
    </template>

12. In the <script> element, import the Kendo UI DropDownList for Vue component.

    Copy Codeimport { DropDownList } from '@progress/kendo-dropdowns-vue-wrapper';

13. In the component class, define the dropDown and dataSourceArray fields. The dropDown will hold the DropDownList instance while the dataSourceArray will contain the data items for the DataSource of the component.

    Copy Codeexport default class HelloWorld extends Vue {
        private dropDown!: kendo.ui.DropDownList;
    
        private dataSourceArray: Array<object> = [
            { text: 'Small', value: '1' },
            { text: 'Medium', value: '2' },
            { text: 'Large', value: '3' },
            { text: 'X-Large', value: '4' },
            { text: '2X-Large', value: '5' }
        ];
    }

14. In the mounted event handler, retrieve the DropDownList instance and assign it to the dropDown field of the component.

    Copy Codeexport default class HelloWorld extends Vue {
        ...
    
        mounted(ev: any) {
            this.dropDown = (this.$refs.dropDownList as DropDownList).kendoWidget() as kendo.ui.DropDownList;
    
            window.console.log(this.dropDown);
        }
    }

15. Run the application.

    Copy Codenpm run serve

Suggested Links

• Kendo UI Vuex Integration
• Vue TypeScript Support