New to Kendo UI for Vue? Start a free 30-day trial

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.

Create the Vue project:
sh
```
npm create vite@latest
```
or
sh
```
yarn create vite
```
Enter the project name, for example, my-app.

Select the Vue framework by using the arrow keys.

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

Select the TypeScript framework variant.

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

Run the newly created project by executing the following commands:
sh
```
cd 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:

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

html

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

Create a new src/appdata/products.ts file. Copy the content of this GitHub file and paste it into the products.ts file.
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:

npm 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

yarn add @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

Import the CSS Styles

Kendo UI for Vue includes four artfully designed themes available as separate NPM packages. To style the components, you can use each theme as is or customize it to your liking.

Install the Default theme:

  npm install --save @progress/kendo-theme-default

yarn add --save @progress/kendo-theme-default

In the src/App.vue file, import the CSS files provided by the installed theme package:
js
```
  import '@progress/kendo-theme-default/dist/all.css';
```

You can add any additional custom styles in the <styles> tag of the src/App.vue file.

Add a Vue Data Grid Component

Now that you've installed all required packages, you are ready to add the Kendo UI for Vue Data Grid to the application:

In the src/App.vue file, add a <script> block and import the Grid and its data:

import { products } from './appdata/products';
import { process } from '@progress/kendo-data-query';
import { Grid } from '@progress/kendo-vue-grid';

Add a <template> block with a simple heading and create a Data Grid. Bind it to the products data:

html

<grid
  :data-items="products"
  :columns="columns"
></grid>

Define the Grid in the <script> configuration:

import { defineComponent } from 'vue';
  name: 'App',
  components: {
    'grid': Grid,
  },
//..............

In the data options add the following lines:

data: function() {
  return {
    categories: categories,
    products: products,
      columns: [
          { field: 'ProductName', title: 'Product Name'},
          { field: 'UnitPrice', title: 'Price' },
          { field: 'UnitsInStock', title: 'Units in Stock' },
          { field: 'Discontinued'}
      ] as GridColumnProps[],
    //..............
  }
}

These steps let you render a very basic Grid by running npm run dev and navigating to the local URL displayed in the terminal.

Notice the No valid license found message and the watermark in the Grid. They are informational and encourage you to activate your trial or commercial license and to add a license file to your application. Once you complete these licensing steps, the license message and the watermark will disappear.

Now that you have a running Grid, you are ready to use some of its basic features like sorting and paging:

In the Grid declaration, add paging, sorting, and a height style that activates scrolling.

html

  <template>
      <h1>Hello Kendo UI for Vue!</h1>
      <grid
        :data-items="products"
        :columns="columns"
        :pageable="pageable"
        :sortable="sortable"
        :style="{ height: '400px' }"
      ></grid>
  </template>

Implement the paging and sorting functionality in the data option:

Set the page size (take) to 10.
Set the initial skip for the paging.
Set the initial sorting by Product name.

data: function() {
  return {
    //..............
    skip: 0 as number | undefined,
    take: 10 as number | undefined,
    sort: [
      { field: "ProductName", dir: "asc" }
    ] as SortDescriptor[] | undefined,
    //..............
  }
}

Get the Complete Source Code

Your Kendo UI for Vue Getting Started application is complete! You can download and run the complete sample application from the kendo-vue GitHub repository. Alternatively, run, fork and experiment with the application directly in StackBlitz.