Prefer video tutorials? How about a free Telerik UI onboarding course? Check out theKendo UI for Vue with TypeScript training inTelerik 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 usingVite and theVue Options API paired with JavaScript.
Curious about TypeScript or the Composition API? This tutorial comes in several additional variants:
Historically, all Kendo UI for Vue Native components have supported bothVue 2 andVue 3. However, Kendo UI for Vue versions released afterNovember 2024 will no longer support Vue 2. For more information, seeVue 2 End of Life.
The recommended way to scaffold your Vue project is usingVite.
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:
npm create vite@latestor
yarn create viteEnter 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 JavaScript framework variant.
? Select a variant: » - Use arrow-keys. Return to submit. TypeScript> JavaScript...Run the newly created project by executing the following commands:
cd my-appnpminstallnpm run devBefore you start playing with Kendo UI for Vue, clean up the sample app created by Vite:
HelloWorld.vue file in thesrc/components folder.src/App.vue file and leave it blank.import './style.css' line in thesrc/main.js file.src/App.vue for Options API configuration:<script></script>Now that the project is clean, you can start developing the sample application.
Components like the Grid need some data that they can display, so, in this step, you will add a file with sample data:
In thesrc folder, create a new folder calledappdata where you will place the JSON file with the data.
Create a newsrc/appdata/categories.json file. Copy the content ofthis GitHub file.json) and paste it into theproducts.json file.
Create a newsrc/appdata/products.json file. Copy the content ofthis GitHub file.
json) and paste it into theproducts.json file.
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 itsdependencies:
Kendo UI for Vue is a rich suite of many modular components. For our dashboard example, we’ll use three of these components: The Grid, the DropDownList and the Window.
npminstall--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-popupor
yarnadd @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-popupKendo UI for Vue includesfour artfully designed themes available as separate NPM packages. To style the components, you can use each theme as is orcustomize it to your liking.
Install theDefault theme:
npminstall--save @progress/kendo-theme-defaultor
yarnadd--save @progress/kendo-theme-defaultIn thesrc/App.vue file, import the CSS files provided by the installed theme package:
import'@progress/kendo-theme-default/dist/all.css';You can add any additional custom styles in the<styles> tag of thesrc/App.vue file.
Now that you've installed all required packages, you are ready to add the Kendo UI for Vue Data Grid to the application:
src/App.vue file, add a<script> block and import the Grid and its data:importproductsfrom'./appdata/products.json';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:
<template><h1>Hello Kendo UI for Vue!</h1><grid:data-items="products":columns="columns"></grid></template>Define the Grid in the<script> configuration:
exportdefault{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'}]//..............}}These steps let you render a very basic Grid by runningnpm run dev and navigating to the local URL displayed in the terminal.
Notice the
We couldn't verify your license keymessage and the watermark in the Grid. They are informational and encourage you to activate your trial or commercial license and toadd 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, addpaging,sorting, and a height style that activatesscrolling.
<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 thedata option:
Set thepage size (take) to 10.
Set the initialskip for the paging.
Set the initialsorting by Product name.
<script>data:function(){return{sortable:true,skip:0,take:10,sort:[{field:"ProductName",dir:"asc"}],//..............}}</script><template><grid:data-items="products":columns="columns":skip="skip":take="take":sort="sort"></grid></template>Your Kendo UI for Vue Getting Started application is complete! You can download and run the complete sample application from thekendo-vue GitHub repository. Alternatively, run, fork andexperiment with the application directly in StackBlitz.