### Run Nuxt 3 Project

Source: https://www.telerik.com/kendo-vue-ui/components/getting-started/get-started-nuxt-3

Navigates into the created 'my-app' directory, installs project dependencies, and starts the development server for the Nuxt 3 application.

```sh
cd my-app
npm install
npm run dev
```

--------------------------------

### Install Kendo UI Drawing Package

Source: https://www.telerik.com/kendo-vue-ui/components/drawing/get-started

Installs the Kendo UI Drawing package using npm. This is the initial step to include the drawing capabilities in your Vue project.

```shell
npm install --save @progress/kendo-drawing
```

--------------------------------

### Install Kendo UI for Vue Default Theme (npm)

Source: https://www.telerik.com/kendo-vue-ui/components/getting-started

Installs the Kendo UI for Vue Default theme package using npm.

```sh
npm install --save @kendo-theme-default
```

--------------------------------

### Install Kendo UI for Vue Conversational UI Package

Source: https://www.telerik.com/kendo-vue-ui/components/conversationalui/get-started

Installs the necessary Kendo UI for Vue Conversational UI npm package and its dependencies. Ensure you have a running Vue project before proceeding with the installation.

```shell
npm install --save @progress/kendo-vue-conversational-ui @progress/kendo-vue-buttons @progress/kendo-vue-layout @progress/kendo-vue-inputs @progress/kendo-vue-progressbars @progress/kendo-licensing @progress/kendo-drawing @progress/kendo-svg-icons @progress/kendo-vue-intl
```

--------------------------------

### Install Kendo UI for Vue Native Inputs Dependencies

Source: https://www.telerik.com/kendo-vue-ui/components/inputs/get-started

Installs the necessary Kendo UI for Vue Native Inputs packages and their dependencies using npm. Ensure you have Node.js v5.0.0 or later installed.

```sh
npm install --save @progress/kendo-vue-inputs @progress/kendo-vue-intl @progress/kendo-drawing @progress/kendo-licensing @progress/kendo-svg-icons
```

--------------------------------

### Install Kendo UI for Vue Components (npm)

Source: https://www.telerik.com/kendo-vue-ui/components/getting-started

Installs the Grid, DropDownList, and Window components along with their essential dependencies like kendo-data-query, kendo-inputs, kendo-intl, kendo-dropdowns, kendo-dateinputs, kendo-drawing, kendo-data-tools, kendo-animation, kendo-licensing, kendo-svg-icons, and kendo-indicators using npm.

```sh
npm install --save @progress/kendo-vue-grid @progress/kendo-data-query @progress/kendo-vue-inputs @progress/kendo-vue-intl @progress/kendo-vue-dropdowns @progress/kendo-vue-dateinputs @progress/kendo-drawing @progress/kendo-vue-data-tools @progress/kendo-vue-animation @progress/kendo-licensing @progress/kendo-svg-icons @progress/kendo-vue-indicators
```

--------------------------------

### Install Kendo UI for Vue Window Component (npm)

Source: https://www.telerik.com/kendo-vue-ui/components/getting-started

Installs the Kendo UI for Vue Window component along with its dependencies, kendo-licensing and kendo-svg-icons, using npm.

```sh
npm install --save @progress/kendo-vue-dialogs @progress/kendo-licensing @progress/kendo-svg-icons
```

--------------------------------

### Create Basic Drawing with Text

Source: https://www.telerik.com/kendo-vue-ui/components/drawing/get-started

Demonstrates creating a drawing surface on an HTML element and rendering text to it. This example utilizes the Surface and Text modules from Kendo UI Drawing.

```javascript
import { Surface, Text, geometry } from '@progress/kendo-drawing';

const { Point } = geometry;

// Create a drawing surface
const element = document.getElementById('canvas');
const surface = Surface.create(element, { type: 'canvas' });

// Create and draw text
const text = new Text('Hello, Kendo Drawing!', new Point(100, 100), {
  font: '18px sans-serif'
});

surface.draw(text);
```

--------------------------------

### Install and Import Default Theme

Source: https://www.telerik.com/kendo-vue-ui/components/icons/get-started

Installs the Kendo UI for Vue Default theme package and imports it into the application. This step is necessary for styling the SvgIcon component.

```shell
npm install --save @progress/kendo-theme-default
```

```jsx
import '@progress/kendo-theme-default';
```

--------------------------------

### Install Kendo UI Date Math Package

Source: https://www.telerik.com/kendo-vue-ui/components/datemath/get-started

Installs the Kendo UI Date Math package using npm. This is the first step to integrating date manipulation functionalities into your Vue project. No specific inputs or outputs are required for this command.

```sh
npm install --save @progress/kendo-date-math
```

--------------------------------

### Vue 3 Rating Component Setup

Source: https://www.telerik.com/kendo-vue-ui/components/inputs/rating

Demonstrates the basic setup and usage of the Kendo UI for Vue Rating component. This example assumes the Kendo UI for Vue Inputs package is installed. It shows how to import and render the Rating component, allowing users to select values by clicking icons.

```javascript
import { Rating } from "@progress/kendo-vue-inputs";

export default {
  components: {
    Rating
  }
};

```

--------------------------------

### Install Kendo UI for Vue Components (yarn)

Source: https://www.telerik.com/kendo-vue-ui/components/getting-started

Installs the Grid, DropDownList, and Window components along with their essential dependencies like kendo-data-query, kendo-inputs, kendo-intl, kendo-dropdowns, kendo-dateinputs, kendo-drawing, kendo-data-tools, kendo-animation, kendo-licensing, kendo-svg-icons, and kendo-indicators using yarn.

```sh
yarn add @progress/kendo-vue-grid @progress/kendo-data-query @progress/kendo-vue-inputs @progress/kendo-vue-intl @progress/kendo-vue-dropdowns @progress/kendo-vue-dateinputs @progress/kendo-drawing @progress/kendo-vue-data-tools @progress/kendo-vue-animation @progress/kendo-licensing @progress/kendo-svg-icons @progress/kendo-vue-indicators
```

--------------------------------

### Vue Component Script Setup for Data Grid

Source: https://www.telerik.com/kendo-vue-ui/components/getting-started/typescript-options-api

Sets up the Vue component script, registering the Kendo UI Grid component and defining its initial configuration, including data sources and column definitions.

```javascript
import { defineComponent } from 'vue';
  name: 'App',
  components: {
    'grid': Grid,
  },
//..............

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[],
    //..............
  }
}
```

--------------------------------

### Install Kendo UI Data Query Package

Source: https://www.telerik.com/kendo-vue-ui/components/dataquery/get-started

This command installs the Kendo UI Data Query package using npm. It saves the package as a dependency in your project. This is the initial step to integrate data querying capabilities into your application.

```sh
npm install --save @progress/kendo-data-query
```

--------------------------------

### Install Kendo UI Default Theme (NPM)

Source: https://www.telerik.com/kendo-vue-ui/components/conversationalui/get-started

This command installs the Kendo UI Default theme package using npm. This theme is essential for the correct visual appearance of Kendo UI for Vue components, including the AIPrompt.

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

--------------------------------

### Install Kendo UI for Vue Native Indicators and Licensing

Source: https://www.telerik.com/kendo-vue-ui/components/indicators/get-started

Installs the necessary Kendo UI for Vue Indicators package and the licensing component using npm. Requires Node.js v5.0.0 or later.

```sh
npm install --save @progress/kendo-vue-indicators @progress/kendo-licensing
```

--------------------------------

### Import and Use Date Math Functions in Vue

Source: https://www.telerik.com/kendo-vue-ui/components/datemath/get-started

Demonstrates importing and utilizing Kendo UI Date Math functions within a Vue application. It shows how to import specific functions like `weekInYear` and `addDays`, and provides an example of calculating the week number for a given date. This requires the installed package and a JavaScript environment.

```javascript
import { weekInYear, addDays } from '@progress/kendo-date-math';

const date = new Date(2000, 10, 10);
const weekNumber = weekInYear(date);

console.log(weekNumber);
// Returns the week number of the corresponding date.
```

--------------------------------

### Install Kendo UI File Saver Package

Source: https://www.telerik.com/kendo-vue-ui/components/filesaver/get-started

Install the Kendo UI File Saver package using npm. This command adds the necessary files to your project's node_modules directory.

```sh
npm install --save @progress/kendo-file-saver
```

--------------------------------

### Install Kendo UI for Vue Default Theme (yarn)

Source: https://www.telerik.com/kendo-vue-ui/components/getting-started

Installs the Kendo UI for Vue Default theme package using yarn.

```sh
yarn add --save @kendo-theme-default
```

--------------------------------

### Create Nuxt 3 Project

Source: https://www.telerik.com/kendo-vue-ui/components/getting-started/get-started-nuxt-3

Initializes a new Nuxt 3 project named 'my-app' using the `nuxi` CLI. This sets up the basic structure for a Nuxt 3 application.

```sh
npx nuxi init my-app
```

--------------------------------

### Create Vite Project with NPM

Source: https://www.telerik.com/kendo-vue-ui/components/getting-started

Scaffolds a new Vue project using Vite and NPM. This is the recommended way to start a new Vue application, especially when using the Composition API.

```sh
npm create vite@latest
```

--------------------------------

### Troubleshoot License Activation

Source: https://www.telerik.com/kendo-vue-ui/components/my-license

Provides steps to resolve 'License activation failed' warnings. This involves a clean installation of project dependencies by removing `node_modules` and lock files, followed by a fresh install and license activation.

```bash
rm -rf node_modules

```

```bash
rm -f package-lock.json yarn.lock

```

```bash
npm install

```

```bash
npx kendo-ui-license activate

```

--------------------------------

### Install Kendo UI for Vue Editor Dependencies (npm)

Source: https://www.telerik.com/kendo-vue-ui/components/editor/get-started

Installs the Kendo UI for Vue Editor package and its required peer dependencies using npm. Ensure you have Node.js v5.0.0 or later installed.

```sh
npm install --save @progress/kendo-vue-editor @progress/kendo-vue-intl @progress/kendo-vue-buttons @progress/kendo-vue-dropdowns @progress/kendo-vue-dialogs @progress/kendo-vue-inputs @progress/kendo-vue-layout @progress/kendo-vue-popup @progress/kendo-vue-pdf @progress/kendo-vue-progressbars @progress/kendo-drawing @progress/kendo-licensing
```

--------------------------------

### Install Kendo UI Licensing Package

Source: https://www.telerik.com/kendo-vue-ui/components/my-license

Installs the necessary package for Kendo UI licensing. This is a prerequisite for activating your license key. It can be installed using either npm or yarn.

```bash
npm install --save @progress/kendo-licensing
```

```bash
yarn add @progress/kendo-licensing
```

--------------------------------

### Install ScrollView Package

Source: https://www.telerik.com/kendo-vue-ui/components/scrollview/get-started

Installs the Kendo UI for Vue Native ScrollView component and its necessary dependencies via npm. Requires Node.js v5.0.0 or later.

```sh
npm install --save @progress/kendo-vue-scrollview @progress/kendo-vue-intl @progress/kendo-licensing @progress/kendo-svg-icons
```

--------------------------------

### Install ProgressBars npm Package

Source: https://www.telerik.com/kendo-vue-ui/components/progressbars/get-started

Installs the Kendo UI for Vue Native ProgressBars package and the licensing package. Ensure you are using Node.js v5.0.0 or later.

```sh
npm install --save @progress/kendo-vue-progressbars @progress/kendo-licensing
```

--------------------------------

### Kendo UI Grid Component Setup

Source: https://www.telerik.com/kendo-vue-ui/components/grid/persist-state

This HTML snippet shows the basic setup for a Kendo UI Grid component in Vue. It includes binding to data items and configuring various features like sorting, filtering, grouping, and pagination. The grid's height and column definitions are also specified.

```html
<Grid
    :style="{ 'height': '700px' }"
    :sortable="sortable"
    :filterable="filterable"
    :groupable="groupable"
    :reorderable="reorderable"
    :pageable="{ buttonCount: 4, pageSizes: true }"
    :data-items="dataResult"
    :skip="skip"
    :take="take"
    :sort="sort"
    :group="group"
    :filter="filter"
    :columns="columns"
    :detail="detailComponent"
    :expand-field="'expanded'"
    ......
    >
    ......

</Grid>
```

--------------------------------

### Install TreeView Package and Dependencies (npm)

Source: https://www.telerik.com/kendo-vue-ui/components/treeview/get-started

Installs the Kendo UI TreeView package, licensing, and SVG icons using npm. Ensure you have Node.js v5.0.0 or later.

```shell
npm install --save @progress/kendo-vue-treeview @progress/kendo-licensing @progress/kendo-svg-icons
```

--------------------------------

### Install and Import Default Theme

Source: https://www.telerik.com/kendo-vue-ui/components/scrollview/get-started

Installs the Kendo UI for Vue Default theme package and imports its CSS file into the application. This is required for styling the ScrollView and other components.

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

```jsx
import '@progress/kendo-theme-default/dist/all.css';
```

--------------------------------

### Install Kendo UI for Vue Window Component (yarn)

Source: https://www.telerik.com/kendo-vue-ui/components/getting-started

Installs the Kendo UI for Vue Window component along with its dependencies, kendo-licensing and kendo-svg-icons, using yarn.

```sh
yarn add @progress/kendo-vue-dialogs @progress/kendo-licensing @progress/kendo-svg-icons
```

--------------------------------

### Vue Indicators Basic Usage Example

Source: https://www.telerik.com/kendo-vue-ui/components/indicators

Demonstrates the basic usage of all available Kendo UI for Vue Indicator components (Badge, Loader, Skeleton) in a single example. This snippet shows how to integrate and display these components to indicate status or loading states.

```html
<template>
    <div class="example-container">
        <kendo-badge :value="'New'"></kendo-badge>
        <kendo-loader :size="'large'"></kendo-loader>
        <kendo-skeleton :shape="'rectangle'"></kendo-skeleton>
    </div>
</template>

<script>
import { Badge } from '@progress/kendo-vue-indicators';
import { Loader } from '@progress/kendo-vue-indicators';
import { Skeleton } from '@progress/kendo-vue-indicators';

export default {
    components: {
        'kendo-badge': Badge,
        'kendo-loader': Loader,
        'kendo-skeleton': Skeleton
    }
};
</script>

<style>
.example-container > * {
    margin: 10px;
}
</style>
```

--------------------------------

### Import Kendo UI and jQuery via CDN in HTML

Source: https://www.telerik.com/kendo-vue-ui/components/vue-wrappers-summary

Demonstrates how to include Kendo UI for jQuery components in a Vue.js project by linking to CDN resources. This is an alternative to using NPM packages for quick setup or when direct dependency management is not preferred.

```html
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2024.4.1112/js/kendo.all.min.js"></script>
```

--------------------------------

### Install ListBox Package with npm

Source: https://www.telerik.com/kendo-vue-ui/components/listbox/get-started

Installs the Kendo UI for Vue Native ListBox package along with its essential dependencies, @progress/kendo-licensing and @progress/kendo-svg-icons. Requires Node.js v5.0.0 or later.

```shell
npm install --save @progress/kendo-vue-listbox @progress/kendo-licensing @progress/kendo-svg-icons
```

--------------------------------

### Install Kendo UI Notification Package

Source: https://www.telerik.com/kendo-vue-ui/components/notification/get-started

Installs the Kendo UI for Vue Notification package along with necessary dependencies like licensing and SVG icons. Ensure you have Node.js v5.0.0 or later.

```sh
npm install --save @progress/kendo-vue-notification @progress/kendo-licensing @progress/kendo-svg-icons
```

--------------------------------

### Bootstrap Monorepo Packages (Shell)

Source: https://www.telerik.com/kendo-vue-ui/components/source-code

Executes 'npm run bootstrap' to prepare the Lerna-based monorepo, linking any cross-dependencies between the Kendo UI for Vue packages.

```sh
npm run bootstrap
```

--------------------------------

### Install Kendo UI ListView Package

Source: https://www.telerik.com/kendo-vue-ui/components/listview/get-started

Installs the Kendo UI for Vue Native ListView package along with licensing and SVG icon dependencies. Requires Node.js v5.0.0 or later.

```shell
npm install --save @progress/kendo-vue-listview @progress/kendo-licensing @progress/kendo-svg-icons
```

--------------------------------

### Run Vue Development Server (NPM)

Source: https://www.telerik.com/kendo-vue-ui/components/conversationalui/get-started

This command builds and runs your Vue application in development mode. It's used after setting up components and themes to test the application locally.

```sh
npm run dev
```

--------------------------------

### Create Vue Project with Vite (npm/yarn)

Source: https://www.telerik.com/kendo-vue-ui/components/getting-started/javascript-options-api

Scaffolds a new Vue project using Vite. Requires Node.js and npm or yarn. Selects Vue and JavaScript variants.

```sh
npm create vite@latest
yarn create vite
```

```sh
? Select a framework: » - Use arrow-keys. Return to submit.
    Vanilla
>   Vue
    React
    ...
? Select a variant: » - Use arrow-keys. Return to submit.
    TypeScript
>   JavaScript
    ...
npm install
npm run dev
```

--------------------------------

### Install Kendo UI for Vue PDF Processing Package

Source: https://www.telerik.com/kendo-vue-ui/components/pdf-processing/getting-started

Installs the necessary Kendo UI for Vue PDF processing packages using npm. This command requires Node.js v5.0.0 or later.

```sh
npm install --save @progress/kendo-vue-pdf @progress/kendo-drawing @progress/kendo-licensing
```

--------------------------------

### Install Kendo UI for Vue Internationalization Package

Source: https://www.telerik.com/kendo-vue-ui/components/intl/internationalization/get-started

Installs the necessary Kendo UI for Vue Internationalization and licensing packages using npm. This command should be run in the root directory of your Vue project.

```sh
npm install @progress/kendo-vue-intl @progress/kendo-licensing
```

--------------------------------

### Install Kendo UI Vue Icons Package

Source: https://www.telerik.com/kendo-vue-ui/components/icons/get-started

Installs the necessary Kendo UI for Vue common package, SVG icons, and licensing components using npm. These are required for using the SvgIcon component.

```shell
npm install --save @progress/kendo-vue-common @progress/kendo-svg-icons @progress/kendo-licensing
```

--------------------------------

### Initialize OptionsStore

Source: https://www.telerik.com/kendo-vue-ui/components/drawing/api/optionsstore

Demonstrates how to create an instance of OptionsStore with initial nested settings. The OptionsStore can optionally take an observer to notify of changes.

```typescript
import { OptionsStore } from '@progress/kendo-drawing';

const options = new OptionsStore({
  foo: {
    bar: true
  }
});
```

--------------------------------

### Install Kendo UI Theme Default

Source: https://www.telerik.com/kendo-vue-ui/components/getting-started/get-started-nuxt-3

Installs the default Kendo UI theme for Vue using npm or yarn. This package provides the necessary CSS files to style the Kendo UI components.

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

```sh
yarn add --save @progress/kendo-theme-default
```

--------------------------------

### Activate Kendo UI License Key

Source: https://www.telerik.com/kendo-vue-ui/components/my-license

Registers the installed license key with your Kendo UI for Vue project. This command should be run after installing the licensing package and placing the license file or setting the environment variable. It can be executed via npm or yarn scripts.

```bash
npx kendo-ui-license activate
```

```bash
yarn run kendo-ui-license activate
```