Get Started with Kendo UI for Vue

Prefer video tutorials? How about a free Telerik UI onboarding course? Check out the Kendo UI for Vue with TypeScript training in Telerik Virtual Classroom.

This tutorial will help you develop a simple app that includes a native Vue Data Grid component. To achieve this, you will build a project using Vite and the Vue Composition API paired with TypeScript.

Curious about JavaScript or the Composition API? This tutorial comes in several additional variants:

• Kendo UI for Vue with TypeScript and the Composition API
• Kendo UI for Vue with JavaScript and the Options API
• Kendo UI for Vue with the Composition API and Nuxt 3

Historically, all Kendo UI for Vue Native components have supported both Vue 2 and Vue 3. However, Kendo UI for Vue versions released after November 2024 will no longer support Vue 2. For more information, see Vue 2 End of Life.

Create the Vue Project

The recommended way to scaffold your Vue project is using Vite.

You can use both NPM and Yarn to create the project and import the Kendo UI for Vue components. This tutorial demonstrates only the NPM approach.

1. Create the Vue project:

   Copy Codenpm create vite@latest

2. Enter the project name, for example, my-app.

3. Select the Vue framework by using the arrow keys.

   Copy Code? Select a framework: » - Use arrow-keys. Return to submit.
       Vanilla
   >   Vue
       React
       ...

4. Select the TypeScript framework variant.

   Copy Code? Select a variant: » - Use arrow-keys. Return to submit.
   >  TypeScript
      JavaScript
       ...

5. Run the newly created project by executing the following commands:

   Copy Codecd my-app
   npm install
   npm run dev

Clean Up the Generated Project

Before you start playing with Kendo UI for Vue, clean up the sample app created by Vite:

1. Delete the HelloWorld.vue file in the src/components folder.
2. Remove everything in the src/App.vue file and leave it blank.
3. Delete the import './style.css' line in the src/main.ts file.
4. Clear the script tag in src/App.vue for Options API configuration:

Copy Code<script>
</script>

Now, when we are ready with the blank Vue project, we can continue the development of our sample application.

Add Application Data

Components like the Grid need some data that they can display, so, in this step, you will add a file with sample data:

1. Create a new src/appdata/products.ts file. Copy the content of this GitHub file and paste it into the products.ts file.

2. Create a new src/appdata/categories.ts file. Copy the content of this GitHub file and paste it into the products.ts file.

Install the Data Grid Component

Kendo UI for Vue is distributed as multiple NPM packages, scoped to @progress. For example, the name of the Grid package is @progress/kendo-vue-grid. To use the Grid in your app, add the component and its dependencies:

Copy Codenpm install --save @progress/kendo-vue-grid @progress/kendo-data-query @progress/kendo-licensing @progress/kendo-vue-animation @progress/kendo-vue-data-tools @progress/kendo-vue-dateinputs @progress/kendo-vue-dropdowns @progress/kendo-vue-inputs @progress/kendo-vue-indicators @progress/kendo-vue-intl @progress/kendo-vue-popup