Getting Started with Kendo UI for Vue

Updated on Sep 9, 2026

Get up and running with Kendo UI for Vue—scaffold a project in just a few steps, then explore the most popular components to start building your UI. New to the library? See Key Features for an overview of what Kendo UI for Vue offers.

Kendo UI for Vue is a professional grade UI library with 100+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.Start Free Trial

Quick Start

Set up your first Kendo UI for Vue project and start building in minutes. Use the Kendo CLI for fast command-line scaffolding (recommended), or the VS Code Extension for a visual, wizard-driven experience.

CLI VS Code Extension

Create a Project with the Kendo CLI

The Kendo CLI offers both an interactive wizard and direct setup commands. If you are new to Kendo UI for Vue, the wizard gives you the fastest way to start.

Install the CLI globally:
sh
```
npm i -g @progress/kendo-cli@latest
```
Launch the interactive wizard by running kendo with no arguments:
sh
```
kendo
```
In the Quick Start section, select Create a new project, then follow the prompts to configure your project (product, template, app name, theme, and swatch).

When setup is complete, the wizard shows a summary similar to this:

 ◇  Kendo UI for Vue app ready  ✓─────────────────────────────╮
 │                                                            │
 │ Next steps                                                 │
 │ • cd KendoUIForVueApp                                      │
 │ • npm i                                                    │
 │ • npm run dev                                              │
 │                                                            │
 │ Theme       Meridian                                       │
 │ Styling     CSS                                            │
 │                                                            │
 │ Docs  https://www.telerik.com/kendo-vue-ui/components/     │
 │                                                            │
 ╰────────────────────────────────────────────────────────────╯

Run the commands in the Next steps section to install the dependencies and start the development server.

Prefer to run commands manually? See Generate a Kendo UI for Vue Project for all available options.

Create a Project with the VS Code Extension

Use the Kendo UI Productivity Tools extension for VS Code to scaffold a project from a template wizard.

Install the extension from the Visual Studio Marketplace.
Open the VS Code Command Palette (Ctrl/Command + Shift + P) and run Kendo UI Template Wizard.
Set the project name and path, select Kendo UI for Vue as the project type, choose a template and a theme, then click Create Project.
Install the dependencies and start the app:
sh
```
npm install && npm run serve
```

The extension also provides code snippets (type kv- in your editor) and scaffolders for generating components such as Grids and Charts directly in an existing project.

Have an Existing Project?

If you want to add a Kendo UI for Vue component to an existing project, install its package and a Kendo theme, then import and use the component:

Install the component package and a theme, for example the DropDownList:

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

Import the theme styles and the component in your .vue file:

import '@progress/kendo-theme-default/dist/all.css';
import { DropDownList } from '@progress/kendo-vue-dropdowns';

Add the component to your template:

html

<DropDownList :data-items="['Item 1', 'Item 2', 'Item 3']" />

Alternatively, run kendo scaffold vue grid (or chart, form, scheduler) from the Kendo CLI to generate a ready-made page inside an existing Vue project. For all available options, see Scaffold Components in an Existing Project.