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

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 TypeScript and the Options API

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

1. Create a Nuxt project named my-app:

Copy Codenpx nuxi init my-app

1. 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 Nuxt:

1. Delete the <NuxtWelcome /> line inside the app.vue file

Add Application Data

Add dummy data needed by the components. Create folder appdata in the src folder. Add the following files to the appdata folder.

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

2. Create a new appdata/products.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

or

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

1. Install the Default theme:

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

   or

   Copy Codeyarn add --save @progress/kendo-theme-default

2. In the nuxt.config.ts file, import the CSS files provided by the installed theme package:

   Copy Code  import '@progress/kendo-theme-default/dist/all.css';

Add a Vue Data Grid Component

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

Copy Codenpx nuxi add page KendoGrid

1. In the pages/KendoGrid.vue file, add a <script> block and import the Grid and its data:

Copy Codeimport { productsData } from '../appdata/products';
import { process, DataResult, State, CompositeFilterDescriptor, SortDescriptor } from '@progress/kendo-data-query';
import { Grid as grid } from '@progress/kendo-vue-grid';

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

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

1. Add the Data Grid's data and columns in the setup section of the KendoGrid.vue file:

Copy Codeconst products = productsData;
const 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:

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

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

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

Copy Codeconst skip = ref<number | undefined>(0);
const take = ref<number | undefined>(10);
const sort = ref<SortDescriptor[] | undefined>([
  { field: "ProductName", dir: "asc" }
]);

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.

Next Steps

• Activate Your Kendo UI for Vue License
• Create Projects Faster with the Kendo UI for Vue VS Code Extension
• Take a Free Entry-Level Kendo UI for Vue (with TypeScript) Course