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.

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

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

    vue create kendo-vue-in-typescript
  4. Select the Manually select features option.

    TypeScript Create New Project

  5. Select TypeScript to include it 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 similar contents as demonstrated below.

    {
       "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.

    npm 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.

    npm 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.

    import '@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.

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

    <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.

    import { 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.

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