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:
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:
shnpm create vite@latest
or
shyarn create vite
-
Enter the project name, for example,
my-app
. -
Select the Vue framework by using the arrow keys.
sh? Select a framework: » - Use arrow-keys. Return to submit. Vanilla > Vue React ...
-
Select the TypeScript framework variant.
sh? Select a variant: » - Use arrow-keys. Return to submit. > TypeScript JavaScript ...
-
Run the newly created project by executing the following commands:
shcd 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 thesrc/components
folder. - Remove everything in the
src/App.vue
file and leave it blank. - Delete the
import './style.css'
line in thesrc/main.ts
file. - Clear the script tag in
src/App.vue
for Options API configuration:
<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 theproducts.ts
file. -
Create a new
src/appdata/categories.ts
file. Copy the content of this GitHub file and paste it into theproducts.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
or
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:
shnpm install --save @progress/kendo-theme-default
or
shyarn add --save @progress/kendo-theme-default
-
In the
src/App.vue
file, import the CSS files provided by the installed theme package:jsimport '@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 theproducts
data:
<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.