# Getting Started with Kendo UI for Vue

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](https://www.telerik.com/kendo-vue-ui-develop/components/getting-started/key-features) for an overview of what Kendo UI for Vue offers.

<CtaPanelOverview message="@ProductLink 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."></CtaPanelOverview>

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

<TabStrip>
<TabStripTab title="CLI">

### Create a Project with the Kendo CLI

The [Kendo CLI](https://www.npmjs.com/package/@progress/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.

1. Install the CLI globally:

   ```sh
   npm i -g @progress/kendo-cli@latest
   ```

2. Launch the interactive wizard by running `kendo` with no arguments:

   ```sh
   kendo
   ```

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

```sh
 ◇  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](https://www.telerik.com/kendo-vue-ui-develop/components/kendo-cli-setup#generate-a-kendo-ui-for-vue-project) for all available options.

</TabStripTab>

<TabStripTab title="VS Code Extension">

### Create a Project with the VS Code Extension

Use the [Kendo UI Productivity Tools extension for VS Code](https://www.telerik.com/kendo-vue-ui-develop/components/vscode-extension) to scaffold a project from a template wizard.

1. Install the extension from the [Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=KendoUI.kendotemplatewizard).
2. Open the VS Code Command Palette (`Ctrl/Command + Shift + P`) and run **Kendo UI Template Wizard**.
3. Set the project name and path, select **Kendo UI for Vue** as the project type, choose a template and a [theme](https://www.telerik.com/kendo-vue-ui-develop/components/styling), then click **Create Project**.
4. Install the dependencies and start the app:

   ```sh
   npm install && npm run serve
   ```

The extension also provides [code snippets](https://www.telerik.com/kendo-vue-ui-develop/components/vscode-extension/snippets) (type `kv-` in your editor) and [scaffolders](https://www.telerik.com/kendo-vue-ui-develop/components/vscode-extension/scaffolders) for generating components such as Grids and Charts directly in an existing project.

</TabStripTab>
</TabStrip>

### 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](https://www.telerik.com/kendo-vue-ui-develop/components/styling), then import and use the component:

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

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

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

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

3. 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](https://www.telerik.com/kendo-vue-ui-develop/components/kendo-cli-setup#scaffold-components-in-an-existing-project).

## Detailed Walkthroughs

Prefer a complete, step-by-step tutorial that builds a small dashboard app? Pick the guide that matches your preferred language and API style:

* [JavaScript with the Composition API](https://www.telerik.com/kendo-vue-ui-develop/components/getting-started/javascript-composition-api)
* [JavaScript with the Options API](https://www.telerik.com/kendo-vue-ui-develop/components/getting-started/javascript-options-api)
* [TypeScript with the Composition API](https://www.telerik.com/kendo-vue-ui-develop/components/getting-started/typescript-composition-api)
* [TypeScript with the Options API](https://www.telerik.com/kendo-vue-ui-develop/components/getting-started/typescript-options-api)
* [Nuxt 3 with the Composition API](https://www.telerik.com/kendo-vue-ui-develop/components/getting-started/get-started-nuxt-3)

## Next Steps

We are sure that you are looking for more—browse the [components page](https://www.telerik.com/kendo-vue-ui/components) and discover the amazing features that Kendo UI for Vue brings to the table.

Happy coding!

<article-card-container>
    <article-card
        href="/grid"
        src="/kendo-vue-ui-develop/components/assets/87d0450dc144cd1c2364bc13a9b3a2df/grid.svg"
        darkSrc="/kendo-vue-ui-develop/components/assets/87d0450dc144cd1c2364bc13a9b3a2df/grid.svg"
        title="Data Grid"
        subTitle="UI Component"
        description="Transform data into interactive experiences with powerful sorting, filtering, paging, and editing built right in.">
    </article-card>
    <article-card
        href="/charts"
        src="/kendo-vue-ui-develop/components/assets/8d415fb741a84e8ef24df5add8685e95/charts.svg"
        darkSrc="/kendo-vue-ui-develop/components/assets/8d415fb741a84e8ef24df5add8685e95/charts.svg"
        title="Charts"
        subTitle="UI Component"
        description="Turn complex datasets into visual stories with 17 customizable chart and series types.">
    </article-card>
    <article-card
        href="/form"
        src="/kendo-vue-ui-develop/components/assets/00d36791d9162d362cb77b0c1bc04f4e/form.svg"
        darkSrc="/kendo-vue-ui-develop/components/assets/00d36791d9162d362cb77b0c1bc04f4e/form.svg"
        title="Form"
        subTitle="UI Component"
        description="Build robust forms effortlessly with automatic validation, field management, and seamless data handling.">
    </article-card>
    <article-card
        href="/my-license"
        title="Activate Your License"
        src="/kendo-vue-ui-develop/components/assets/8636cf8c61bd24110e830a74dca8296d/productivity.svg"
        darkSrc="/kendo-vue-ui-develop/components/assets/8636cf8c61bd24110e830a74dca8296d/productivity.svg"
        subTitle="Productivity Tools"
        description="Set up your trial or commercial license key.">
    </article-card>
    <article-card
        href="/vscode-extension"
        title="VS Code Extension"
        src="/kendo-vue-ui-develop/components/assets/8636cf8c61bd24110e830a74dca8296d/productivity.svg"
        darkSrc="/kendo-vue-ui-develop/components/assets/8636cf8c61bd24110e830a74dca8296d/productivity.svg"
        subTitle="Productivity Tools"
        description="Boost your productivity with instant project scaffolding, smart snippets, and one-click component generation right in your editor.">
    </article-card>
    <article-card
        href="https://www.telerik.com/design-system/docs/"
        title="Progress Design System"
        src="/kendo-vue-ui-develop/components/assets/8636cf8c61bd24110e830a74dca8296d/productivity.svg"
        darkSrc="/kendo-vue-ui-develop/components/assets/8636cf8c61bd24110e830a74dca8296d/productivity.svg"
        subTitle="Productivity Tools"
        description="Create pixel-perfect, accessible interfaces with ready-to-use Figma kits and comprehensive design patterns.">
    </article-card>
</article-card-container>

<style>
[class^="tab-strip-module--container"] {
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    padding: 15px;
}

[class^="tab-strip-module--tabList"] [class^="tab-strip-module--tabElement"]:first-child::after {
    content: "Recommended";
    display: inline-block;
    margin-left: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    background: #e7f6ec;
    color: #1f7a3d;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    vertical-align: middle;
}
</style>