All Components

TypeScript Integration

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

Below are listed the steps required to use the Kendo UI Vue components with TypeScript:

  1. Install Vue CLI:

    npm install --global @vue/cli
  2. If you have already installed the Vue CLI, make sure it is version 3.0 or higher:

    vue --version
  3. navigate to the folder of choice and create there the new Vue project:

    vue create kendo-vue-in-typescript
  4. Then chose the Manually select features option:

    TypeScript Create New Project

  5. And TypeScript to be available in the application:

    TypeScript Configure Project

  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 contents similar to the following:

    { 
       "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 Kendo theme of preference:

    npm install -s @progress/kendo-ui
    npm install - s @progress/kendo-theme-default
  8. Install the Kendo Vue packages, that would be required for the specific project scenario. In this sample we have installed the kendo-dropdowns-vue-wrapper package:

    npm install - s @progress/kendo-dropdowns-vue-wrapper
  9. In the main.ts file import the Kendo UI, Kendo theme and the DropdownsInstaller from kendo-dropdowns-vue-wrapper:

    import '@progress/kendo-ui';
    import '@progress/kendo-theme-default';
    import { DropdownsInstaller } from '@progress/kendo-dropdowns-vue-wrapper'
  10. Then include the DropdownsInstaller to be used by Vue:

    Vue.use(DropdownsInstaller);
  11. In the HelloWorld.vue component change its template content so it includes a Kendo Vue DropDownList:

    <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 Vue DropDownList component:

    import { DropDownList } from '@progress/kendo-dropdowns-vue-wrapper';
  13. In the component class, define dropDown and dataSourceArray fields. The dropDown will hold the DropDownList widget instance, while the dataSourceArray contains the data items for the DataSource of the widget:

    export 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 widget instance and assign it to the dropDown field of the component:

    export 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:

    npm run serve
In this article